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.
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. 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.