Filters Blendmodes

The CSS filter property applies graphic effects like blur() , brightness() , and grayscale() to an element, while mix-blend-mode controls how its colours blend with the layers beneath — together giving you Photoshop-style effects in pure CSS.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll be able to retouch images with pure CSS, build frosted-glass cards, tint photos with blend modes, and combine these into Instagram-style presets and Spotify-style duotones — no Photoshop, no image editing, just a few lines of CSS.

Filters are the Instagram editing screen for a single photo. Slide "blur" up and the photo softens; slide "brightness" up and it glows. You're processing the picture itself, and you can stack several adjustments at once.

Blend modes are sheets of coloured acetate you lay over the photo — the colour mixes with what's underneath instead of just sitting on top. And backdrop-filter is frosted bathroom glass : the glass itself is clear, but everything behind it turns soft and dreamy. Same idea — three different things to blur: the element, the colours that meet it, or the world behind it.

The filter property applies graphical effects to an element — the same kinds of adjustments you'd reach for in a photo editor, but in CSS. It works on anything: images, text, a div , even a video. You give it one or more filter functions , and they run left to right like a pipeline.

Run the worked example. Each card applies one filter, and hovering removes it so you can compare against the untouched image. Read the comment beside every rule to see what value produces what.

You can list several filter functions in one declaration, separated by spaces: filter: grayscale(40%) brightness(1.2) contrast(0.9); . That single line is how the "vintage", "dramatic", and "faded" looks of photo apps are built — a fixed recipe of small adjustments stacked together.

The functions run left to right , so order changes the result. brightness(1.5) blur(5px) brightens the sharp image first, then blurs the bright pixels; swap them and you blur first, then brighten the soft pixels — a different look. Treat the order as part of the effect.

backdrop-filter blurs (or brightens, etc.) whatever is rendered behind an element, while the element's own content stays sharp. This is the "glassmorphism" look: a translucent card floating over a photo, with the photo blurred where it shows through.

Two things are required, and both are common stumbling blocks. First, the element needs a semi-transparent background like rgba(255,255,255,0.15) — a fully opaque background hides the blur completely. Second, Safari needs the -webkit-backdrop-filter prefix as well, so always write both.

A blend mode decides how the colours of two layers combine instead of one simply covering the other. mix-blend-mode blends an element with whatever sits behind it on the page — drop a coloured div over a photo with mix-blend-mode: multiply and the colour soaks into the photo.

background-blend-mode is the inward-looking cousin: it blends an element's own background layers together — say a background-image with a background-color — without touching anything else on the page. Worth knowing the names: multiply darkens (and makes white vanish), screen lightens, overlay boosts contrast, and color keeps the photo's brightness but takes the overlay's hue — perfect for tinting.

A classic portfolio effect: thumbnails are black-and-white until you hover, when they bloom into colour. Fill in the blanks marked ___ , then run it and check the expected result in the comments.

The card below sits over a photo but currently looks flat — the glass effect is missing. Add the semi-transparent background and the backdrop-filter (with its Safari prefix) to frost the photo behind it. Verify the expected look in the comments.

Support is faded now — only an outline is given. Build the Spotify-style duotone: a greyscaled photo with a coloured gradient blended on top in color mode. Lean on the worked examples in sections 1 and 4 if you get stuck.

You can now retouch images and build rich visual effects with pure CSS. The essentials:

Next up: CSS Architecture , where you'll learn to organise and scale stylesheets so a large codebase stays maintainable.

Practice quiz

What does the CSS filter property act on?

  • The element it is applied to (e.g. blurring that element)
  • Only the page background
  • Whatever is rendered behind a translucent element
  • Only sibling elements

Answer: The element it is applied to (e.g. blurring that element). filter processes the element itself — filter: blur(4px) blurs that element.

What does backdrop-filter act on?

  • The element's own text
  • Whatever is rendered behind the element, seen through its translucent background
  • The element's border only
  • The entire document at once

Answer: Whatever is rendered behind the element, seen through its translucent background. backdrop-filter blurs/adjusts what is behind a semi-transparent element — the glassmorphism effect.

When you chain filter functions, how are they applied?

  • All at once, order does not matter
  • Right to left
  • Left to right, like a pipeline, so order changes the result
  • In a random order

Answer: Left to right, like a pipeline, so order changes the result. Filters run left to right, so brightness(1.5) blur(5px) differs from blur(5px) brightness(1.5).

A common reason backdrop-filter shows no blur is that:

  • The element's own background is fully opaque, leaving nothing see-through
  • The element has too much text
  • filter was used instead of color
  • The page has no images

Answer: The element's own background is fully opaque, leaving nothing see-through. An opaque background hides the blur; you need a semi-transparent background like rgba(255,255,255,0.15).

Which prefixed property does Safari require alongside backdrop-filter?

  • -moz-backdrop-filter
  • -ms-backdrop-filter
  • -webkit-backdrop-filter
  • -o-backdrop-filter

Answer: -webkit-backdrop-filter. Safari needs -webkit-backdrop-filter with the same value as backdrop-filter.

What is the difference between mix-blend-mode and background-blend-mode?

  • mix-blend-mode blends an element with what is behind it on the page; background-blend-mode blends an element's own background layers
  • They are identical
  • mix-blend-mode only works on text; background-blend-mode only on images
  • background-blend-mode blends with other elements; mix-blend-mode blends background layers

Answer: mix-blend-mode blends an element with what is behind it on the page; background-blend-mode blends an element's own background layers. mix-blend-mode blends with the page beneath; background-blend-mode blends an element's own background layers.

With mix-blend-mode: multiply, what happens to white areas of the top layer?

  • They turn black
  • They stay unchanged and let the layer below show through (white vanishes)
  • They become fully opaque
  • They invert their color

Answer: They stay unchanged and let the layer below show through (white vanishes). Multiplying by white (1) leaves pixels unchanged, so white areas effectively disappear.

Which filter function produces a shadow that follows the shape of a PNG cut-out rather than its box?

  • box-shadow(...)
  • drop-shadow(...)
  • blur(...)
  • contrast(...)

Answer: drop-shadow(...). filter: drop-shadow() follows the element's actual shape, unlike box-shadow which hugs the rectangle.

What does filter: grayscale(100%) do?

  • Makes the element fully transparent
  • Removes all color, making the element fully black and white
  • Doubles the brightness
  • Rotates the hue by 100 degrees

Answer: Removes all color, making the element fully black and white. grayscale(100%) fully desaturates the element to black and white.

Why can adding a filter unexpectedly change how z-index resolves?

  • filter disables z-index entirely
  • Any filter value creates a new stacking context
  • filter forces position: absolute
  • filter only affects opacity

Answer: Any filter value creates a new stacking context. A non-none filter creates a new stacking context, which can re-order layered elements.