background-blend-mode
Setting how an element's background images should blend with the background color.
Overview
| Class | Declarations |
|---|---|
background-blend-mode:normal | background-blend-mode: normal;
|
background-blend-mode:multiply | background-blend-mode: multiply;
|
background-blend-mode:screen | background-blend-mode: screen;
|
background-blend-mode:overlay | background-blend-mode: overlay;
|
background-blend-mode:darken | background-blend-mode: darken;
|
background-blend-mode:lighten | background-blend-mode: lighten;
|
background-blend-mode:color-dodge | background-blend-mode: color-dodge;
|
background-blend-mode:color-burn | background-blend-mode: color-burn;
|
background-blend-mode:hard-light | background-blend-mode: hard-light;
|
background-blend-mode:soft-light | background-blend-mode: soft-light;
|
background-blend-mode:difference | background-blend-mode: difference;
|
background-blend-mode:exclusion | background-blend-mode: exclusion;
|
background-blend-mode:hue | background-blend-mode: hue;
|
background-blend-mode:saturation | background-blend-mode: saturation;
|
background-blend-mode:color | background-blend-mode: color;
|
background-blend-mode:luminosity | background-blend-mode: luminosity;
|
background-blend-mode:<mode> | background-blend-mode: <mode>;
|
Examples
Blend background layers
Compare the same image and blue background color with normal and multiply blending. With normal blending, the opaque image covers the color; multiply combines their colors.
<!-- Normal · opaque image covers color --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-center bg-cover bg-no-repeat background-blend-mode:normal bg-blue-30 background-image:url(/demo/landscape.svg)"></div><!-- Multiply · image × blue color --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-center bg-cover bg-no-repeat background-blend-mode:multiply bg-blue-30 background-image:url(/demo/landscape.svg)"></div>Generated CSS
@layer utilities { .background-blend-mode\:multiply { background-blend-mode: multiply }}Background layers blend with each other and the element’s background color. They do not blend with content behind the element. Use mix-blend-mode when the whole element should blend with its external backdrop.
Restore normal blending
Hover or focus the image to restore normal blending. The image and blue color stay in place; only their compositing changes.
<!-- Multiply → normal on interaction --><div id="target" tabindex="0" role="img" aria-label="Compare original image colors" class="h:160px w-xs max-w:100% bg-center bg-cover bg-no-repeat background-blend-mode:multiply bg-blue-30 background-image:url(/demo/landscape.svg) background-blend-mode:normal:hover@screen background-blend-mode:normal:focus-visible@screen"></div>The unchanged, fully opaque image reveals its original colors in the normal state.
Apply conditionally
Resize the actual viewport to sm to apply multiply blending. Smaller screens and print restore normal blending.
<!-- Normal → multiply at sm --><div id="target" role="img" aria-label="Geometric landscape" class="h:160px w-xs max-w:100% bg-center bg-cover bg-no-repeat background-blend-mode:normal bg-blue-30 background-image:url(/demo/landscape.svg) background-blend-mode:normal@print background-blend-mode:multiply@screen@sm"></div>Check foreground contrast after blending. Keep captions outside the painted subject so they do not hide the effect.