Filter Functions
| Function | Range | Description |
|---|---|---|
| blur(px) | 0px+ | Gaussian blur. blur(0) = no blur |
| brightness(%) | 0%+ | 100% = original. 0% = black. 200% = double bright |
| contrast(%) | 0%+ | 100% = original. 0% = grey. 200% = very high contrast |
| grayscale(%) | 0–100% | 100% = fully grey, 0% = original colour |
| sepia(%) | 0–100% | 100% = full sepia tone |
| saturate(%) | 0%+ | 100% = original. 0% = grey. 200% = very saturated |
| hue-rotate(deg) | 0–360deg | Rotates all hues around the colour wheel |
| invert(%) | 0–100% | 100% = fully inverted colours |
| opacity(%) | 0–100% | Like the opacity property but composited differently |
| drop-shadow() | Same as box-shadow | Unlike box-shadow, follows the actual shape (alpha channel) |
Usage Examples
/* Desaturate image on hover */
.card img { filter: grayscale(100%); transition: filter 0.3s; }
.card:hover img { filter: grayscale(0%); }
/* Darken on hover */
.card:hover img { filter: brightness(80%); }
/* Loading/disabled state */
.loading { filter: blur(4px) brightness(70%); }
/* Colour-shift an SVG icon */
.icon { filter: hue-rotate(120deg); }
/* Drop shadow that follows PNG shape */
.logo { filter: drop-shadow(0 4px 12px rgba(99,102,241,0.5)); }
/* Stack multiple filters */
.vintage { filter: sepia(60%) contrast(110%) brightness(95%); }backdrop-filter
backdrop-filter applies filters to everything behind the element — used for glassmorphism effects:
.glass {
background: rgba(14, 22, 40, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Required for Safari */
}Performance
- filter is GPU-accelerated — generally performant
- blur() and drop-shadow() are the most expensive — avoid on large areas
- Applying filter creates a new stacking context (same z-index gotcha as opacity)
- Use
will-change: filtersparingly — only if you're animating filter