CSS Filters and backdrop-filter

CSS filters let you blur, brighten, grey out or add shadows to images and elements, and backdrop-filter blurs what is behind a box to make frosted glass.

What is the CSS filter property?

The filter property applies a visual effect to an element, like the filters in a photo app. It works on images, but also on any element: text, cards, buttons and videos. Here are the most useful filter functions:

Function	What it does	Example
blur()	Makes the element blurry	blur(4px)
brightness()	Lighter or darker (1 is normal)	brightness(1.2)
contrast()	More or less contrast (1 is normal)	contrast(1.5)
grayscale()	Removes color (1 is fully grey)	grayscale(1)
sepia()	Old brown photo effect	sepia(0.8)
saturate()	Stronger or weaker colors	saturate(2)
drop-shadow()	A shadow that follows the shape	drop-shadow(0 4px 6px black)

You can combine several functions in one line, separated by spaces. They run in order, from left to right.

.old-photo {
  filter: sepia(0.7) contrast(1.1) brightness(0.95);
}

Any image with the class old-photo now looks like a warm, slightly faded print from the past.

Hover effects on images with filter

Filters are great for hover effects. A classic one: show team photos in black and white, and bring the color back when the mouse is over them.

<div class="team">
  <img src="https://picsum.photos/id/64/200/200" alt="Anna, designer">
  <img src="https://picsum.photos/id/65/200/200" alt="Omar, developer">
  <img src="https://picsum.photos/id/91/200/200" alt="Lena, writer">
</div>

.team {
  display: flex;
  gap: 16px;
}

.team img {
  border-radius: 12px;
  filter: grayscale(1) brightness(0.9);
  transition: filter 0.3s ease;
}

.team img:hover {
  filter: grayscale(0) brightness(1);
}

All three photos start in grey. When you hover one, its color fades back in smoothly. The transition makes the change soft instead of sudden.

Tip: When you animate filters, keep the same functions in the same order in both states (here grayscale then brightness). Then the browser can smoothly move from one value to the other.

What is the difference between drop-shadow and box-shadow?

You already know box-shadow. It always draws a shadow around the element's rectangle (or rounded rectangle). filter: drop-shadow() draws a shadow around the visible shape of the element, so transparent parts don't get a shadow.

.logo-box {
  box-shadow: 0 4px 8px rgb(0 0 0 / 0.3);
}

.logo-drop {
  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
}

Put both classes on a transparent PNG or SVG logo, like a star. With box-shadow you'll see a shadow in the shape of a square around the star. With drop-shadow the shadow follows the star's points. Use drop-shadow for icons and cut-out images, and box-shadow for cards and boxes. Note that drop-shadow() has no spread value and no inset.

Frosted glass with backdrop-filter

backdrop-filter is different: it doesn't change the element itself. It applies the filter to whatever is behind the element. Combined with a see-through background, you get the popular "frosted glass" look.

<div class="hero">
  <div class="glass-card">
    <h2>Welcome back</h2>
    <p>You have 3 new lessons waiting.</p>
  </div>
</div>

.hero {
  min-height: 300px;
  display: grid;
  place-items: center;
  background: url("https://picsum.photos/id/1018/1200/600") center / cover;
}

.glass-card {
  padding: 24px 32px;
  border-radius: 16px;
  color: white;
  background: rgb(255 255 255 / 0.15);
  border: 1px solid rgb(255 255 255 / 0.3);
  backdrop-filter: blur(12px) saturate(1.4);
}

The card in the middle shows the mountain photo behind it, but blurred, like looking through bathroom glass. The background must be partly transparent, otherwise there is nothing to see through. backdrop-filter works in all modern browsers.

Performance and fallbacks

Filters are drawn by the graphics card and are usually fast, but blur() is expensive, especially large blurs on large areas, and backdrop-filter must be recalculated every time something behind it moves. A few frosted cards are fine. A full-screen blurred layer on top of a scrolling page can make cheap phones stutter.

Also make sure your text is still readable if the effect doesn't load. A safe pattern is to give a more solid background first, and only make it see-through when the browser supports backdrop-filter:

.glass-card {
  background: rgb(30 41 59 / 0.85);
}

@supports (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgb(255 255 255 / 0.15);
    backdrop-filter: blur(12px);
  }
}

Older or unusual browsers get a dark, almost solid card that is easy to read. Modern browsers get the glass effect. You'll learn more about @supports in the Cutting-Edge CSS module.

Common mistake: White text on a lightly blurred bright photo. It looks nice in your screenshot, but the contrast may be too low to read. Test with a few different images, or add a darker tint.

See every filter function on MDN's filter page.

Practice exercise

Make a product gallery of four images. By default, show them slightly darker with brightness(0.8). On hover, make them full brightness and a bit more saturated, with a smooth transition. Then add a frosted-glass label at the bottom of each image showing the product name.

Hint: put each image and label in a wrapper with position: relative, and place the label with position: absolute; bottom: 0; plus backdrop-filter: blur(8px).

Key takeaways

• filter applies photo-style effects such as blur(), grayscale() and brightness().
• Combine filters in one line; they run from left to right.
• drop-shadow() follows the visible shape; box-shadow follows the box.
• backdrop-filter blurs what is behind an element and needs a see-through background.
• Large blurs cost performance; provide a readable fallback.