CSS <blend-mode> Data Type
The <blend-mode>
data type describes how an element is blended with its backdrop.
Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap. The <blend-mode>
data type can be used with blending properties such as mix-blend-mode
and background-blend-mode
to define how the source element blends with its backdrop where the two overlap.
Examples
The background-blend-mode
Property
Here's an example of using <blend-mode>
with the background-blend-mode
property.
Here's a working example:
The mix-blend-mode
Property
Here we use the mix-blend-mode
property to specify how an image blends with the background color of the body
element.
Possible Values
When you see <blend-mode>
(including the <
and >
) anywhere in the CSS specifications, this refers to the fact that the value can be one of the following:
normal
- This is the default attribute which specifies no blending. The source element will be its specified color, regardless of the color of its backdrop. This is akin to having two opaque pieces of paper overlapping.
multiply
- Multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. This results in a darker color. Similar to two images on transparent film overlapping.
screen
- The values of the pixels in the two layers are inverted, multiplied, and then inverted again. This has the opposite effect to
multiply
. The result is a brighter color. overlay
- Combines
multiply
andscreen
modes. The parts of the top layer where the base layer is light become lighter, the parts where the base layer is dark become darker. darken
- Keeps the darker tones of each layer. All pixels of the layer that are darker than the ones on the layer/s below are kept in the image. If the pixels are lighter, they are replaced with the ones from the layer/s below. This rule is applied to each of the three RGB (Red, Green, Blue) channels separately.
lighten
- Same behavior as
darken
but with the lighter tones kept instead. color-dodge
- Divides the bottom layer by the inverted top layer. This lightens the bottom layer depending on how bright the top layer is (i.e. the brighter the top layer, the more its color affects the bottom layer).
color-burn
- Divides the inverted bottom layer by the top layer, and then inverts the result. This darkens the top layer increasing the contrast to reflect the color of the bottom layer. The darker the bottom layer, the more its color is used.
hard-light
- Combines the
multiply
andscreen
modes. Equivalent tooverlay
, but with the bottom and top images swapped. soft-light
- Softer version of
hard-light
difference
- Subtracts the bottom layer from the top layer or the other way round, to always get a positive value (i.e. subtracting the darker color from the lighter color). Blending with black produces no result, as the value will always be
0
(due to the RGB value for black being0,0,0
). Blending with white inverts the other layer's color. exclusion
- Similar to
difference
, but with lower contrast. hue
- Results in the hue of the top color, while using the saturation and luminosity of the bottom color.
saturation
- Results in the saturation of the top color, while using the hue and luminosity of the bottom color.
color
- Results in the hue and saturation of the top color, while using the luminosity of the bottom color.
luminosity
- Results in the luminosity of the top color, while using the hue and saturation of the bottom color.
CSS Specifications
- The
<blend-mode>
data type is defined in Compositing and Blending Level 1 (W3C Candidate Recommendation, 13 January 2015)
Browser Support
The following tables provided by Caniuse.com show the level of browser support for the properties that accept a <blend-mode>
value.