Blend-modes, filters and backdrop-filters can be used in CSS to create special effects similar to effects in image editing software programs.
The pros of using CSS to create these effects are:
- Ease of use for website administrators, who does not need to know how to create or edit special images.
- Since less specialty knowledge is needed, more junior members of staff can edit and update the website. This can help the company use its personnel more effectively and ultimately save money.
- Improved website performance since many of the effects previously was only obtainable through images. When created with CSS instead, the website page load will decrease.
When to Use Which Effect
Blend-modes
Use blend-modes to create effects by blending multiple elements or backgrounds. background-blend-mode blends background images, gradients, and colors. mix-blend-mode is for blending different elements with their surroundings and can also be used with pseudo-elements.
See the article “Blend Modes in CSS” for more details about background-blend-mode and mix-blend-mode.
Filters
Use filters to add effects to a single element. backdrop-filter is used to apply the filter to an elements background, while filter applies the effect to the whole element.
It is possible to define your own filters in SVG for even more custom effects. Just keep an eye out for a bug that (at the time of writing) might prevent linking to external SVG file filters in Chrome.
See our blogposts “CSS backdrop-filter” and “CSS Filter” for more details.
Top comments (0)