Which Blend Mode? — A practical guide to using each CSS blend mode, with working examples
Blend modes, also known as blending modes or mixing modes, allow for a number of unique visual effects, handy for both UI elements and photo manipulation. This guide explains the basics behind each blend mode, and offers a number of practical examples for use in the wild.
Each blend mode in this article contains an example, like the one across the page from this textat the top of this page. Try dragging the white bar, clicking on the two images below, and changing the blend mode at the bottom (click on hue). You can also press the swatch button to change the source image.
I'll be releasing a complementary article to this soon, going deeper into the CSS/HTML concepts, and explaining more.
Blend modes are simply mathematical operations applied between each pixel on the backdrop layer, and its overlapping pixel on the source layer. For example, the multiply blend mode multiplies the backdrop & source colors to create the new color, as you can see with these lightness values:
This isn't the exact calculation (as that occurs in the RGB color space), but this a tidy representation of what happens.
The exact calculation
Backdrop = rgb(128, 128, 128)
Source = rgb(204, 204, 204)
r = (128 * 204) / 256 = 102
g = (128 * 204) / 256 = 102
b = (128 * 204) / 256 = 102
Result = rgb(102, 102, 102)
This multiplication will be applied to every source & backdrop pixel, until we have a result. In JavaScript, this operation could be written as a simple function:
function Blend (colorOfBackdrop, colorOfSource) {
return colorOfBackdrop * colorOfSource
}
And if we abstract this a little further, we have our mathematical function for multiply:
In HTML & CSS, the blend mode is applied to the source element. The backdrop is the combination of layers below the source in the current stacking context.
This is a simple way to use blend modes, and also how they're used in this article:
<div class="container">
<div class="backdrop">
<img src="car.jpg" />
</div>
<div class="source"></div>
</div>.container {
position: relative;
}
.source {
position: absolute;
inset: 0;
background: green;
mix-blend-mode: hard-light;
}
Another way is to give the source layer a higher z-index value than the backdrop.
The normal blend mode is the default for every element. The source layer is displayed.
- Normal is part of the normal group
The multiply blend mode multiplies the colors of the source by the backdrop. This will result in all pixels being darker than they were originally, unless white is used.
- Using black produces black
- Using white has no effect
- Multiply is similar to darken
- Multiply is the inverse of screen
- Multiply is part of the darken group
Practical uses
on snow
The darken blend mode chooses the darker color between the source and backdrop. This means that if a pixel on the source is lighter than the backdrop, the backdrop's pixel will still show.
- Using black produces black
- Using white has no effect
- Darken is similar to multiply
- Darken is the inverse of lighten
- Darken is part of the darken group
Practical uses
text
text
The color burn blend mode darkens the backdrop to match the source. The darker the backdrop color, the more it's blended, resulting in a darker and higher contrast image.
- Using black produces black
- Using white has no effect
- Color burn is the inverse of color-dodge
- Color burn is part of the darken group
Practical uses
panel
The screen blend mode inverts the source and backdrop, multiplies the colors, and inverts the result. This will result in all pixels being lighter than they were originally, unless black is used.
- Using white produces white
- Using black has no effect
- Screen is similar to lighten
- Screen is the inverse of multiply
- Screen is part of the lighten group
Practical uses
on night
The lighten blend mode chooses the lighter color between the source and backdrop. This means that if a pixel on the source is darker than the backdrop, the backdrop's pixel will still show.
- Using white produces white
- Using black has no effect
- Lighten is similar to screen
- Lighten is the inverse of darken
- Lighten is part of the lighten group
Practical uses
The color dodge blend mode lightens the backdrop to match the source. The lighter the backdrop color, the more it's blended, resulting in a lighter and higher contrast image.
- Using white produces white
- Using black has no effect
- Color dodge is the inverse of color-burn
- Color dodge is part of the lighten group
Practical uses
The overlay blend mode multiplies or screens the colors, depending on brightness, and then mixes the result into the backdrop. The result is a higher contrast image, with the backdrop modified to reflect the brightness of the source.
- Using 50% gray has no effect
- Overlay is similar to soft-light
- Overlay is the inverse of hard-light
- Overlay is part of the contrast group
Practical uses
to opacity
The soft light blend mode darkens or lightens the colors, depending on the color of the source. The result is similar to overlay, but less harsh—a slightly higher contrast image, with the backdrop modified to reflect the brightness of the source.
- Using 50% gray has no effect
- Soft light is similar to overlay
- Soft light is part of the contrast group
Practical uses
The hard light blend mode multiplies or screens the colors, depending on brightness. The result is a much higher contrast image.
- Using black/white produces black/white
- Using 50% gray has no effect
- Hard light is the inverse of overlay
- Hard light is part of the contrast group
Practical uses
The difference blend mode subtracts the darker of the two colors from the lightest color. The lighter the source color, the stronger the effect, and the closer the result is to becoming a negative of the backdrop.
- Using white will invert the image
- Using black has no effect
- Difference is similar to exclusion
- Difference is part of the inversion group
Practical uses
dark mode
I'm over black or white
I'm over black or white
The exclusion blend mode produces a less harsh version of difference. The lighter the source color, the stronger the effect, and the closer the result is to becoming a negative of the backdrop.
- Using 50% gray produces 50% gray
- Using black has no effect
- Exclusion is similar to difference
- Exclusion is part of the inversion group
Practical uses
The hue blend mode creates a new color by combining the hue of the source, and the saturation and luminosity of the backdrop. The result is the backdrop with the source's hue.
- Lightness and saturation don't affect hue
- Hue is similar to color
- Hue is part of the component group
Practical uses
The saturation blend mode creates a new color by combining the saturation of the source, and the hue and luminosity of the backdrop. The result is the backdrop with the source's saturation.
- Hue has a small effect; some hues are more luminous than others
- All grays have the same effect
- Saturation is part of the component group
Practical uses
The color blend mode creates a new color by combining the hue and saturation of the source, and the luminosity of the backdrop. The result is the backdrop with the source's hue and saturation.
- All grays have the same effect
- Color is similar to hue
- Color is the inverse of luminosity
- Color is part of the component group
Practical uses
The luminosity blend mode creates a new color by combining the luminosity of the source, and the hue and saturation of the backdrop. The result is the backdrop with the source's luminosity.
- Luminosity is the inverse of color
- Luminosity is part of the component group
