Subscribe to our Newsletter

Get articles, advice and tips about:

You can read more about our privacy policy and how we use your personal data here.

CSS Special Effects

CSS Special Effects

by Frida Nyvall

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 our blogpost “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.

Tags

More posts

img

CSS Filters

img

CSS backdrop-filter

img

Blend Modes in CSS