Filters & Blend Modes

Filters apply photo-editing effects — blur, brightness, contrast, greyscale, shadows — to any element. Backdrop filters affect what's behind an element, creating frosted-glass panels. Blend modes mix colours of overlapping layers, like layers in an image editor.

filter

Try it yourself
Result

Filters can be combined, applied in order: filter: grayscale(1) contrast(1.2) blur(1px). They work on any element, including text and whole sections.

Hover effects with filters

Try it yourself
Result

drop-shadow

Try it yourself
Result

drop-shadow follows the visible shape — transparent areas included — while box-shadow follows the rectangular box.

backdrop-filter: frosted glass

Try it yourself
Result

backdrop-filter applies filters to whatever is visible behind the element. It needs a semi-transparent background to show the effect. Use it with care: heavy blur is expensive to render, and text on glass must still meet contrast requirements.

mix-blend-mode

Try it yourself
Result

mix-blend-mode blends an element with whatever is behind it. Common modes: multiply (darkens — great for removing white backgrounds from logos), screen (lightens), overlay, difference, color and luminosity.

background-blend-mode

Try it yourself
Result

background-blend-mode blends an element's own background layers together — an easy way to create duotone and colour-tinted images.

Things to watch

  • Filters and blend modes create a new stacking context (lesson 25).
  • Large blurs and backdrop filters can slow down scrolling on low-powered devices.
  • Effects are visual only: if an image's meaning changes (e.g. greyed out = unavailable), say so in text too.

Try it yourself

Try it yourself
Result
PreviousAnimations