Estimated reading time: 4 minutes, 45 seconds
PhotoShop’s blend modes are arriving in CSS via the new
background-blend-mode properties. Values for the properties –
hard-light, etc – are exactly the same as those in Adobe applications. It’s been my experience that relatively few people understand what blend modes are exactly, even among those who use Photoshop on a daily basis. In practice, it’s usually a case of choosing a particular mode because the result “looks right”.
We don’t want to carry that state of ignorance into web development. In this article, I will illustrate what the basic blend modes are and how they work, with the goal of killing two birds with one stone: whether you’re interested in PhotoShop or want to play with CSS blending, what follows should be helpful regardless.