CSS Blend Modes: Photoshop Effects in the Browser
Think Photoshop layer effects, but in CSS. Blend modes define how overlapping element colors interact—multiplying or screening them for rich effects. Use them for text knockouts on images or complex background textures.
Why it exists
To create sophisticated visual effects directly in the browser without needing pre-processed images from design tools. This allows for dynamic, responsive designs where text and images can interact visually in complex ways, previously only achievable with static assets.
The mental model
Imagine you have two slides for an old-school projector. Stacking them is normal blending (opacity). But blend modes combine the light passing through them. multiply is like printing both images on the same transparent film, making everything darker. screen is like aiming two projectors at the same spot, making everything brighter. Each blend mode is a different mathematical formula for combining the colors of the top and bottom layers.
How it works
CSS provides two properties: mix-blend-mode and background-blend-mode. mix-blend-mode applies to an entire element, blending it with whatever is behind it in the stacking context. background-blend-mode applies only to an element's background layers, blending multiple background images or gradients with each other. You choose a keyword like multiply, screen, or overlay to define the color calculation.
When to use it
Use blend modes for dynamic visual effects. A common use for mix-blend-mode is creating a "knockout" text effect where text color inverts as it passes over different background sections. background-blend-mode is great for applying a color tint to a background image or combining multiple gradients to create a unique, non-repeating texture without a large image file.
When not to use it
Avoid blend modes on critical text or UI elements where legibility is paramount and could be compromised by an unpredictable background. The calculations can be performance-intensive, so use them judiciously and test on lower-powered devices, especially with animations or scrolling. They are for presentation, not for core content structure.
One canonical example
To make white text on a colorful image always legible, you can use mix-blend-mode: difference;. This subtracts the darker color from the lighter one. When white text (#FFFFFF) is over a dark part of the image, it stays white. When it's over a light part of the image, its color inverts and becomes dark, maintaining contrast. For example: h1 { color: white; mix-blend-mode: difference; } placed over an image ensures the heading is always visible.
Interview question
Which CSS property is most appropriate for combining multiple background gradients and applying a color tint to a background image within a single element?
- a.background-blend-modeCorrect
- b.mix-blend-mode
- c.opacity
- d.filter
Why? this is the answer
background-blend-mode is specifically designed for blending multiple background layers (like gradients or images) within a single element, and for applying effects like color tints to background images. mix-blend-mode, while also a blend mode, blends an entire element with the content behind it in the stacking context, not its own background layers.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #design
- #visual effects
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles