Combining multiple backgrounds

background-blend-mode

Controls how two or more backgrounds should be merged. Backgrounds may include images, colors and gradients.

Property values

A blending algorithm takes the colors of each pixel of a foreground and background image, and perfoms a calculation on them, creating a new color value.

The possible algorithms are:

normal The second background completely obscures the first background, in normal z-order fashion
multiply Combine the overlapping backgrounds, with black forcing its way through, and white remaining unchanged
screen Combine the overlapping backgrounds, with white forcing its way through, and black remaining unchanged
overlay Behaves like "multiply" if the bottom color is darker. Behaves like "screen" if the bottom color is lighter
darken Combine the darkest color from each overlapping background pixel
lighten Combine the lightest color from each overlapping background pixel
color-dodge Same as "screen", except the front image only needs to be as light as the inverse of the behind image
color-burn Same as "multiply", except the front image only needs to be as dark as the inverse of the behind image
hard-light Behaves like "multiply" if the top color is darker. Behaves like "screen" if the top color is lighter
soft-light Behaves like "hard-light" but softer
difference Subtracts the darker background from the lighter one. A black layer has no effect; a white layer inverts the other layer's color
exclusion Like "difference" but with less contrast
hue The final color has the hue of the top color, but the saturation and luminosity of the bottom color
saturation The final color has the saturation of the top color, but the hue and luminosity of the bottom color
luminosity The final color has the luminosity of the top color, but the hue and saturation of the bottom color
color The final color has the hue and saturation of the top color, but the luminosity of the bottom color

Examples

background-image: linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
background-blend-mode

style > background > background-blend-modeCombining multiple backgrounds

Q