CSS Blend Modes
19 May 2020
Improving the Editing Experience
with CSS Blend Modes
Being able to blend background images and HTML elements is not a new technology. However, as global browser support nowadays is slightly above 90% word-wide, these techniques have become increasingly accessible for most users.
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).
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.
See the Pen CSS Blend Mode Example: Tinting an Image by Frida Nyvall (@fridanyvall) on CodePen.
Blending multiple images
Making two or more images blend artfully.
See the Pen CSS Blend Mode Example: Blending Images Together by Frida Nyvall (@fridanyvall) on CodePen.
Knockout Text and Overlapping Text
Useful for improving SEO since the text does not have to be included in the image. Improves performance since the image part is smaller because it will no longer contain the text part. This helps reduce the time spent on image editing.
See the Pen CSS Blend Mode Example: Knockout Text by Frida Nyvall (@fridanyvall) on CodePen.
See the Pen CSS Blend Mode Example: Overlapping Text by Frida Nyvall (@fridanyvall) on CodePen.
See the Pen CSS Blend Mode Example: Overlapping Text and Blending Images by Frida Nyvall (@fridanyvall) on CodePen.
See the Pen Playing with Mix-blend-mode by Frida Nyvall (@fridanyvall) on CodePen.
Want to know more about how to write the code for these effects? Read the article ”Blend Modes in CSS” on our Tech Blog.
