background-blend-mode
Decides how the stacked background layers of a single element are composited. Backgrounds stack as background images first, background color last, and this property changes how they mix, exactly like layer blend modes in a graphics editor.
Class List
| Class | CSS | Description |
|---|---|---|
bbmn | background-blend-mode: normal | No blending (default) |
bbmm | background-blend-mode: multiply | Darkens (Photoshop multiply) |
bbms | background-blend-mode: screen | Lightens (Photoshop screen) |
bbmo | background-blend-mode: overlay | Combines multiply & screen |
bbmd | background-blend-mode: darken | Keeps the darker color |
bbml | background-blend-mode: lighten | Keeps the lighter color |
bbmcd | background-blend-mode: color-dodge | Brightens to reflect blend |
bbmcb | background-blend-mode: color-burn | Darkens to reflect blend |
bbmhl | background-blend-mode: hard-light | Harsh overlay contrast |
bbmsl | background-blend-mode: soft-light | Soft overlay contrast |
bbmdf | background-blend-mode: difference | Difference of the two colors |
bbme | background-blend-mode: exclusion | Like difference, lower contrast |
bbmh | background-blend-mode: hue | Applies hue only |
bbmsa | background-blend-mode: saturation | Applies saturation only |
bbmco | background-blend-mode: color | Applies hue + saturation |
bbmlu | background-blend-mode: luminosity | Applies luminosity only |
Live Demo
All eight tiles use the same gradient over the same solid color and differ only in the blend mode. The bottom layer is a deep magenta, the top layer a blue-to-yellow gradient.
normal — bbmn
multiply — bbmm
screen — bbms
overlay — bbmo
darken — bbmd
lighten — bbml
difference — bbmdf
luminosity — bbmlu
<!-- Every tile above: one gradient layer over one solid color layer -->
<div class="w100p h10rem br8px bglg-45deg-38BDF8-FACC15 bgFF0080 bbmm"></div>
<div class="w100p h10rem br8px bglg-45deg-38BDF8-FACC15 bgFF0080 bbms"></div>
<div class="w100p h10rem br8px bglg-45deg-38BDF8-FACC15 bgFF0080 bbmdf"></div>Class Details
bbmnbackground-blend-mode: normal
The default. The upper layer simply covers the one beneath it. Use it explicitly to cancel a blend mode inherited from a shared component class.
<!-- Default: the top layer simply covers the one below -->
<div class="bbmn bglg-to-r-6366F1-A855F7 bg000000 h20rem br8px"></div>bbmmbackground-blend-mode: multiply
Multiplies the two colors channel by channel. The result is always darker than either input, and multiplying with white changes nothing. This is the mode you reach for when white text has to stay readable over a photo.
<!-- Tint a photo card toward the brand color -->
<div class="bbmm bg6366F1 bsc bgrn bgpc h30rem br8px df jcc aic">
<h3 class="cFFFFFF fs2-4rem fw700">Dark, brand-tinted hero</h3>
</div>bbmsbackground-blend-mode: screen
The inverse of multiply: it multiplies the complements and inverts the result, so the output is always lighter. Blending with black changes nothing. Use it to lift a dark image and reduce its contrast.
<!-- Lift a dark photo so white text stays readable -->
<div class="bbms bg1E1E2E bsc bgrn bgpc h30rem br8px">
<p class="cFFFFFF p2rem">Washed-out, brighter backdrop</p>
</div>bbmobbmhlbbmsloverlay / hard-light / soft-light
Applies multiply or screen per pixel depending on lightness, darkening the shadows and brightening the highlights, so it tints without flattening contrast. hard-light judges by the upper layer and hits much harder; soft-light is a gentle version of the same idea.
<!-- Contrast-preserving tint: shadows stay dark, highlights stay bright -->
<div class="bbmo bg38BDF8 bsc bgrn bgpc h30rem br8px"></div>
<!-- Softer version of the same idea -->
<div class="bbmsl bg38BDF8 bsc bgrn bgpc h30rem br8px"></div>bbmdbbmlbbmcdbbmcbdarken / lighten / color-dodge / color-burn
Compares the two layers channel by channel and keeps the darker (darken) or lighter (lighten) value. color-dodge and color-burn push the lower layer's brightness to the extremes instead, producing hard highlights and deep shadows.
<!-- Cap the brightness of a noisy texture -->
<div class="bbmd bg27272A bsc bgrn h20rem br8px"></div>
<!-- Keep only the bright parts of the texture -->
<div class="bbml bg27272A bsc bgrn h20rem br8px"></div>bbmdfbbmedifference / exclusion
Takes the absolute difference between the two colors. The brighter the overlaid color, the stronger the inversion, giving a neon poster look. exclusion works the same way but collapses midtones toward gray, so contrast is lower.
<!-- Poster-style inversion effect -->
<div class="bbmdf bgFACC15 bsc bgrn bgpc h30rem br8px"></div>bbmhbbmsabbmcobbmluhue / saturation / color / luminosity
Blends only one component of the color. Taking lightness from the lower layer and hue from the upper one, via bbmco, is the standard duotone recipe.
<!-- Recolor a photo while keeping its shading -->
<div class="bbmco bg6366F1 bsc bgrn bgpc h30rem br8px"></div>
<!-- Duotone: keep the color, take the lightness from the image -->
<div class="bbmlu bg6366F1 bsc bgrn bgpc h30rem br8px"></div>Practical Example
A blend mode only means something when there is more than one layer, so specify a background image and a background color together.
<!-- Background color + image multiply blend -->
<div class="bbmm bg6366F1 bsc bgrn bgpc h30rem">
Dark tone overlay effect
</div>
<!-- Screen blend — bright effect -->
<div class="bbms bg000000 bsc bgrn bgpc h30rem">
Bright tone overlay effect
</div>In practice this is most often used to tint photos with a per-category color so a set of mismatched thumbnails reads as one coherent grid.
<!-- Article card: cover image tinted to match the category color,
so a mixed set of thumbnails still reads as one grid -->
<article class="pr oh br12px b1pxsolid27272A">
<div class="bbmm bg6366F1 bsc bgpc bgrn h20rem"></div>
<div class="p2rem">
<span class="fs12px ttu ls0-05em c38BDF8 fw600">Engineering</span>
<h3 class="fs2rem fw700 cFAFAFA mt8px">Shipping CSS without a build step</h3>
</div>
</article>Tips and Pitfalls
With a single layer, nothing happens
If there is only an image and no color, or only a color and no image, there is nothing to blend against and the mode is ignored. Always provide image plus color, or several images.
The background shorthand wipes out the background color
Gradient classes compile to the background shorthand, so if one is applied later in the cascade it resets the background color. Keep the color class after it, or check the rule order.
background-blend-mode is not mix-blend-mode
background-blend-mode blends only the background layers inside one element. To blend an entire element with what is behind it, you need mix-blend-mode. Text and child elements are never affected.
Contrast can collapse without warning
multiply and difference change background lightness dramatically and can destroy the readability of text placed on top. Check the blended result and re-pick the text color if needed.