Background
background-blend-mode
background-blend-mode sets how background images mix with each other and with the background color, so a single element’s background can tint a photo.
Syntax<blend-mode># …
<blend-mode>#
<blend-mode> = normal | multiply | screen | overlay
| darken | lighten | color-dodge | color-burn
| hard-light | soft-light | difference | exclusion
| hue | saturation | color | luminosityPreview
Code
.box {
background-image: linear-gradient(90deg, #1f2937, #ffffff);
background-color: #e0951a;
background-blend-mode: multiply;
}Controls
About
Only the element’s own background mixes
Each background image layer blends with the layers below it and the background color, and the bottom layer blends with the color. Nothing behind the element, such as the parent’s background or other elements, takes part. To mix with those, use mix-blend-mode, whose modes work the same way.
The preview lays a black → white gradient image over an orange background color, so you can compare how each mode treats dark and light areas.
One mode per layer
Comma-separated values match the layers in background-image order, top layer first. A short list repeats, so a single value applies to every layer. The controls on this page handle a single mode.
Common recipes
- Monotone photo: set a background color and use
luminosityto keep only the image’s lightness. - Tinted photo:
multiplyblends in dark colors andscreenlight ones.
The background shorthand does not reset this property, so the mode stays when you rewrite background later.