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 |