Mix-blend-mode
Learn blend modes with mix-blend-mode.
What is mix-blend-mode?
The mix-blend-mode property decides how an element blends with the layer beneath it. The syntax is mix-blend-mode: multiply; the value is a keyword.
Unlike filter, it considers not just the element but its background too. It produces a true blend of overlapping colors; that is why it appears often in overlays, badges, and typographic effects.
The screen mode brightens
The screen mode is the inverse of multiply. It inverts each color channel, multiplies, then inverts again; the result is always brighter.
Drop a black overlay with mix-blend-mode: screen and the black disappears; only the light tones show. That makes it ideal for glow effects, smoke, sparks.
Blending overlapping elements
mix-blend-mode is most powerful when elements overlap. A colored overlay merges with the image below and a third tone is born.
For instance, put a purple overlay with mix-blend-mode: multiply over a photo; the bright areas take a faint purple, the dark areas turn deep purple. It is a popular trick for in-scene text and banner strips.
Exercise Blend the overlay with multiply
Write a mix-blend-mode: multiply declaration for the .overlay selector. The element should multiply with the layer below.
Show example solution
/* overlay blend */
.overlay {
mix-blend-mode: multiply;
}Test yourself
-
What does the multiply mode do?
.overlay { mix-blend-mode: multiply; }- Multiplies the top colors with the ones below; the result is darker
- Joins colors with white; the result is brighter
- Only draws a shadow at the edges
- Turns colors fully black and white
Show answer
Multiplies the top colors with the ones below; the result is darker — Correct. multiply multiplies each channel; combined with the layer below, the result is always darker.
-
Blend the overlay with multiply
.overlay { ____: multiply; }Show answer
.overlay { mix-blend-mode: multiply; } -
Match each mode and property to its job
- multiply
- Darker tone
- screen
- Brighter tone
- mix-blend-mode
- Blend carrier property
- filter
- Single-element effect