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

Next lesson: Summary - Image effects

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies