CSS blend mode generator — compare all 16 modes side by side

How to use the CSS blend mode generator

1. Choose the Property: mix-blend-mode to blend an element with what is behind it, or background-blend-mode to blend a background colour with a background image.
2. Pick a Mode, or Show all modes to see a grid of all sixteen.
3. Set Colour A and Colour B. In the mix view they are two overlapping circles on a cream background; in the background view, Colour B is blended with a sample photo.
4. Copy the CSS and replace .stack, .top or photo.jpg with your own names.

What it does and when to use it

Blend modes combine colours the way layers do in an image editor. They let you tint a photo with a brand colour, place a dark logo on a textured background without a white box around it, make headings that invert over images, or build duotone hero images entirely in CSS. Because the blend happens in the browser, you can change colours later without re-exporting images.

To see the maths of each mode on two specific colours, use the colour blend modes tool. For simpler see-through effects, a semi-transparent colour from the colour opacity tool may be enough, and for blurring what is behind an element, the backdrop filter generator.

How it works

With mix-blend-mode the tool writes two rules:

.stack {
  isolation: isolate; /* keeps the blend inside this element */
}
.stack .top {
  mix-blend-mode: multiply;
}

With background-blend-mode it writes one rule that sets background-color to Colour B, a placeholder background-image: url("photo.jpg"), and the mode. The sixteen modes are normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.

MDN lists mix-blend-mode, background-blend-mode and isolation as Baseline widely available since January 2020.

Worked examples

The default multiply. Rose #f43f5e over blue #3b82f6: where the circles overlap, the colours multiply into a deep purple, and the CSS is the two-rule block above.

A single-colour photo. background-blend-mode, luminosity, Colour B #0ea5e9: the rule ends with background-blend-mode: luminosity;. The photo keeps its light and dark areas but takes its colour from the sky blue, a quick duotone look.

Limits and tips

• Text contrast becomes unpredictable. Blended text changes colour with whatever is behind it, so check readable areas by eye and with the contrast checker.
• Hue, saturation, color and luminosity need colourful layers; on greys they barely change anything.
• Blending many large layers costs drawing time, especially during scrolling animations.