Effects
mix-blend-mode
mix-blend-mode sets how an element’s colors mix with whatever is drawn behind it, just like the blend modes in image editors.
Syntax<blend-mode> | plus-darker | plus-lighter …
<blend-mode> | plus-darker | plus-lighter
<blend-mode> = normal | multiply | screen | overlay
| darken | lighten | color-dodge | color-burn
| hard-light | soft-light | difference | exclusion
| hue | saturation | color | luminosityPreview
Presets
Drag the bottom-right corner to resize
Code
.box {
background: linear-gradient(
90deg,
#1f2937,
#e0951a,
#ffffff
);
border-radius: 24px;
mix-blend-mode: multiply;
}Controls
mix-blend-modemultiply
About
Families of modes
- Darken:
multiply,darken,color-burn. White disappears and the backdrop shows through. - Lighten:
screen,lighten,color-dodge,plus-lighter. Black disappears. - Contrast:
overlay,soft-light,hard-light. Lights get lighter and darks get darker. - Difference:
difference,exclusion. Identical colors turn black, and white inverts what it covers. - Component:
hue,saturation,color,luminosity. Only part of hue, saturation and lightness comes from the element.
The preview puts a pattern behind a box with a black → orange → white gradient, so you can compare how each mode treats dark and light areas.
Limiting what gets mixed
The element mixes with everything drawn behind it in the same stacking context. Add isolation: isolate to a parent to keep the blending inside it. To blend background layers within a single element, use background-blend-mode.
Watch out
Any value other than normal makes the element a stacking context. plus-darker only works in Safari, so the controls on this page leave it out.