GoKawiilYour browser is a miracle!
Every pixel you see on this page is the result of stacking hundreds of elements on top of each other and deciding, millions of times, pixel by pixel, what the result should look like.
Two important steps in this process are compositing and blending, and in this post, we'll get to see what they are, how they work, and where they can be useful when building fun effects on the web.
What you'll learn: What compositing is, and what it has to do with blend modes
What a blend mode is and how you can reason about what it will do
Which blend modes exist and which ones are commonly useful in real-world scenarios
How blend modes can be used in CSS, and problems that you might run into
Let's dive in!
Compositing
Before we can talk about what a blend mode is, we have to talk about compositing. Compositing is "the process of combining an element with its backdrop", according to the W3C specification. What does this mean?
... continue reading