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;