Being able to blend background images and HTML elements is not a new technology. However, as global browser support nowadays is slightly above 90% world-wide, these techniques have become increasingly accessible for most users.
TL;DR: Skip the theory and go straight to the image examples!
What are Blend Modes?
Blend modes in CSS are used to blend two or more layers using mathematics to calculate the color value for every pixel. You can use blend modes on both images, gradients, and solid-colored elements. Those familiar with graphical software programs like Photoshop will recognize some of the blend modes available.
Why Use Blend Modes?
Blend modes are useful for creating visual enhancements while still utilizing HTML elements. This is great for SEO and performance. It also makes it easier to create coherent image and text styles, without requiring skills in image editing software programs.
Using blend modes, website administrators can create visual effects with dynamic content without having to rely on or create specific image content. Creating images also takes time and requires skills in image editing software (like Photoshop). If more employees can help editing because fewer skills are required, it will be easier, faster, and cheaper to edit the website.
Being able to avoid using text as part of images is also beneficial for SEO as well as site performance (since images are always heavy resources to load compared to a few lines of code).
background-blend-mode
Blends the background of an element. An element can simultaneously have background images, gradients and colors set to it. Using background-blend-mode, these layers will get blended with each other. The way layers are blended is decided by one or more (comma separated) background-blend-mode values.
<!--HTML-->
<div class="example"></div>
/*CSS*/
.example{
background: url('your-image.jpg'),
linear-gradient(to bottom, red, blue),
green;
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: luminosity, screen;
width:500px;
height:500px;
}
The order layers are blended seems to be from the first defined background value, which is also the “top” layer. In the above example, the background image will be blended with the linear gradient using the luminosity blend mode value. The color green will then be blended with the result of the image and the gradient, using the screen blend mode value.
NOTE: If the number of background-blend-mode values does not match the list of background images, gradients, or colors set on an element, the background-blend-mode values will be repeated or removed to make the lists match.
Blend Mode Values
- Color: combines the hue and saturation of the overlapping layer with the luminosity of the bottom layer. It can be used to add color or tint to images.
- Color-burn: makes the overlapping area darker unless white is used.
- Color-dodge: makes the overlapping area brighter unless black is used.
- Darken: uses the darkest value of the colors to be blended.
- Difference: subtracts the darker of the colors to be blended from the lighter one. Using white inverts the color of the overlapping area. Using black nothing will change.
- Exclusion: is similar to difference, but with lower contrast. Using white inverts the color of the overlapping area, and using black nothing will change.
- Hard-light: multiplies or screens the colors, depending on the colors of the overlapping layer. Similar to overlay, but with the layers swapped.
- Hue: combines the hue from the overlapping layer and the saturation and luminosity of the other layer.
- Inherit: any value inherited from a parent element.
- Initial: the initial, default value
- Lighten: uses the lightest values of the colors to be blended.
- Luminosity: inverting the effect of the color mode: similar to color, but with the layers swapped. The result has the luminosity of the top layer, with the hue and saturation of the bottom layer. Used to make monochrome tinted images.
- Multiply: the color values of the layers are multiplied with each other. Colors multiplied with black produces black. Multiplying a color with white renders the original color.
- Normal: no fancy effect happening. This is like stacking the elements with no blending mode applied.
- Overlay: uses either multiply or screen, depending on the colors of the two layers. Similar to hard-light, but with the layers swapped.
- Saturation: blends the saturation of the top with the hue and luminosity of bottom layer. If used on an area that has no saturation (is grey), nothing will happen.
- Screen: inverts the colors, multiplies them and inverts the resulting value. Using screen on any color with white renders white. Using with black results in the original color. Compare with multiply.
- Soft-light: darkens or lightens the colors, depending on the colors of the overlapping layer. Similar to hard-light, but softer.
- Unset: global value, resetting the property to fallback to inherit (if the property will inherit from its parent) or initial.
Since there are so many different blend modes available, and the fact that they can be used simultaneously on multiple background layers makes it possible to create a lot of visual effects. Sometimes the best way to find a suitable effect is simply to try different combinations.
FilterBlend is a free online tool to play around with different effects.
CSS Blender by Sara Soueidan is another online demo tool.
There is also a more general map of the blend modes and their visual impacts at Mozilla.
mix-blend-mode
Just as background-blend-mode blends background images, gradients, and colors, mix-blend-mode is for blending different elements with their surroundings. mix-blend-mode can also be used with pseudo-elements, which makes it even more practical for creating visual effects.
Typically, this can be used when you need to change the color of an element depending on the colors of its background.
Thankfully, mix-blend-mode takes the same values as background-blend-mode.
Isolate Elements: Prevent Elements from Blending
Sometimes it can be required to prevent an element from blending. This can be done by setting isolation: isolate; on a parent wrapper around the element you want to prevent from blending.
Isolation is not needed for background-blend-mix, since all the blending is supposed to take place within the element itself.
NOTE: You can achieve the same result of not blending an element if the overlapping element is placed in a parent with opacity lower than 1.
Browser Support
background-blend-mode is supported in all modern browsers, with a global support of about 93%. background-blend-mode is not supported in Internet Explorer or older versions of Edge (versions 12-18). iOS Safari might not support multiple background-blend-modes.
mix-blend-mode has a global support of around 91% (for HTML elements, or blending HTML and SVG, significantly less for only SVG) and is supported in most modern browsers. The feature is not supported in Internet Explorer or older versions of Edge (versions 12-18). Support is reported as “unknown” for some less popular browsers (like Opera Mini).
Blend Mode Examples
The amount of effects that can be achieved using all the capabilities of blend modes is of course mind-bogglingly large. However, some are more common than others.
Tinting an image
Tinting an image with a color of your choice. This helps reduce the time spent on image editing. Employees with no image editing skills can update the images.
Blending multiple images
Making two or more images blend artfully.
Knockout Text and Overlapping Text
Useful for improving SEO since the text does not have to be included in the image. Can help improve performance if the image can be made smaller when not having to incorporate text. This helps reduce the time spent on image editing.
Top comments (0)