mix-blend-mode
Setting how an element's content should blend with its backdrop.
Overview
| Class | Declarations |
|---|---|
mix-blend-mode:normal | mix-blend-mode: normal;
|
mix-blend-mode:multiply | mix-blend-mode: multiply;
|
mix-blend-mode:screen | mix-blend-mode: screen;
|
mix-blend-mode:overlay | mix-blend-mode: overlay;
|
mix-blend-mode:darken | mix-blend-mode: darken;
|
mix-blend-mode:lighten | mix-blend-mode: lighten;
|
mix-blend-mode:color-dodge | mix-blend-mode: color-dodge;
|
mix-blend-mode:color-burn | mix-blend-mode: color-burn;
|
mix-blend-mode:hard-light | mix-blend-mode: hard-light;
|
mix-blend-mode:soft-light | mix-blend-mode: soft-light;
|
mix-blend-mode:difference | mix-blend-mode: difference;
|
mix-blend-mode:exclusion | mix-blend-mode: exclusion;
|
mix-blend-mode:hue | mix-blend-mode: hue;
|
mix-blend-mode:saturation | mix-blend-mode: saturation;
|
mix-blend-mode:color | mix-blend-mode: color;
|
mix-blend-mode:luminosity | mix-blend-mode: luminosity;
|
mix-blend-mode:<mode> | mix-blend-mode: <mode>;
|
Examples
Blend an element with its backdrop
Compare normal paint with multiply across two opaque backdrops. The same blue foreground overlaps a neutral parent background and a violet sibling.
<!-- Normal · one foreground color --><div class="rel isolate h:160px w:240px max-w:100% background-color:#e2e8f0"> <div aria-hidden="true" class="abs bottom right top w:120px background-color:#c4b5fd"></div> <div id="target" role="img" aria-label="Blue foreground across two backdrops" class="abs left:72px top-xl width:96px height:96px r-lg background-color:#2563eb mix-blend-mode:normal"></div></div><!-- Multiply · combines with both backdrops --><div class="rel isolate h:160px w:240px max-w:100% background-color:#e2e8f0"> <div aria-hidden="true" class="abs bottom right top w:120px background-color:#c4b5fd"></div> <div id="target" role="img" aria-label="Blue foreground across two backdrops" class="abs left:72px top-xl width:96px height:96px r-lg background-color:#2563eb mix-blend-mode:multiply"></div></div>Generated CSS
@layer utilities { .mix-blend-mode\:multiply { mix-blend-mode: multiply }}The explicit isolated container bounds the blend group. Blending uses the backdrop already painted behind the element, not only its parent’s background. Labels stay outside the blended subject.
Restore normal blending
Open print preview to remove multiply with mix-blend-mode:normal. The blue foreground then has the same color over both backdrops.
<!-- Multiply on screen · normal in print --><div class="rel isolate h:160px w:240px max-w:100% background-color:#e2e8f0"> <div aria-hidden="true" class="abs bottom right top w:120px background-color:#c4b5fd"></div> <div id="target" role="img" aria-label="Blue foreground across two backdrops" class="abs left:72px top-xl width:96px height:96px r-lg background-color:#2563eb mix-blend-mode:multiply mix-blend-mode:normal@print"></div></div>Normal restores ordinary source-over painting without changing position or dimensions. For layers inside one element’s background, use background-blend-mode.
Apply conditionally
Widen to sm to enable multiply. Print always uses normal blending.
<!-- Normal → multiply at sm --><div class="rel isolate h:160px w:240px max-w:100% background-color:#e2e8f0"> <div aria-hidden="true" class="abs bottom right top w:120px background-color:#c4b5fd"></div> <div id="target" role="img" aria-label="Blue foreground across two backdrops" class="abs left:72px top-xl width:96px height:96px r-lg background-color:#2563eb mix-blend-mode:normal mix-blend-mode:normal@print mix-blend-mode:multiply@screen@sm"></div></div>The fixed source colors make comparisons repeatable in both themes. In an interface, changing backdrop colors can alter contrast; keep important text readable independently of the effect.