CSS Filters

Apply visual effects like blur, brightness, contrast, grayscale, and drop-shadow to elements and backgrounds using filter and backdrop-filter.

Overview

The CSS `filter` property applies visual effects to an element and everything inside it. You can blur images, adjust brightness for hover states, desaturate photos, or add drop shadows that follow the element's actual shape. **filter** vs **backdrop-filter**: - `filter` affects the **element itself** (including its children) - `backdrop-filter` affects the **content behind** the element creates the "frosted glass" effect Filter functions: | Function | Example | Effect | |---|---|---| | `blur()` | `blur(4px)` | Gaussian blur | | `brightness()` | `brightness(1.2)` | Lighten/darken | | `contrast()` | `contrast(1.5)` | Increase/decrease contrast | | `grayscale()` | `grayscale(1)` | Remove color | | `sepia()` | `sepia(0.8)` | Warm vintage tone | | `saturate()` | `saturate(2)` | Boost/reduce saturation | | `hue-rotate()` | `hue-rotate(90deg)` | Rotate color wheel | | `invert()` | `invert(1)` | Invert colors | | `drop-shadow()` | `drop-shadow(2px 4px 8px rgba(0,0,0,0.3))` | Shape-aware shadow |

Key Points

•filter: blur(4px) blurs the element and all its children
•filter: brightness(0) = black; brightness(1) = original; brightness(2) = twice as bright
•filter: grayscale(1) fully desaturates; grayscale(0) is full color
•Multiple filters chain: filter: brightness(1.1) contrast(1.2) saturate(1.1)
•drop-shadow() follows the actual shape (including transparency), unlike box-shadow
•backdrop-filter: blur(12px) creates frosted glass on the content behind the element
•backdrop-filter requires the element to have some transparency (background with opacity or rgba)

Examples

Image hover effects with filter

.photo {
  transition: filter 0.3s ease;
  filter: grayscale(0.3) brightness(0.95);
}

.photo:hover {
  filter: grayscale(0) brightness(1.05) saturate(1.2);
}

/* Dark overlay for text contrast */
.hero-image {
  filter: brightness(0.6);
}

Transitioning between filter states creates smooth color shift animations.

Frosted glass card with backdrop-filter

.frosted-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 24px;
  color: white;
}

backdrop-filter requires the element to be semi-transparent so the content behind shows through.

drop-shadow vs box-shadow on transparent images

/* box-shadow goes around the bounding box */
.icon-box { box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

/* drop-shadow follows the actual alpha shape of the image */
.icon-png {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
}

/* Multiple drop-shadows for a glow effect */
.glow {
  filter:
    drop-shadow(0 0 8px rgba(99,102,241,0.6))
    drop-shadow(0 0 24px rgba(99,102,241,0.3));
}

Common Mistakes

Using filter: blur() without a transition the jump from blurred to sharp is jarring; always transition the filter property
Applying backdrop-filter without reducing the background opacity it has no visible effect on an opaque background
Forgetting -webkit-backdrop-filter for Safari Safari requires the prefix even in 2024

Note

Use filter: brightness(0) saturate(0) invert(1) to turn any colored icon into white. Combine with hue-rotate() to recolor icons to match your brand color no need for multiple SVG variants.

CSS Filters

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What is the difference between filter and backdrop-filter?