CSSApril 2026 · 6 min read

How to Use CSS Filter Effects (Blur, Grayscale, Sepia & More)

CSS filters apply visual effects to elements — blur, grayscale, brightness, contrast, and more — without modifying the source image. They're processed by the GPU, work on any element (not just images), and can be animated for interactive effects like hover-to-color or scroll-driven transitions.

🔬

Try the CSS Filter Playground

Free, no signup

→

Derek Giordano

Designer & Developer

In this guide

01Available CSS Filters02Combining Multiple Filters03Popular Hover Effects04backdrop-filter for Glass Effects

⚡ Key Takeaways

Apply visual filters to images and elements with CSS filter.
Covers available css filters.
Covers combining multiple filters.
Covers popular hover effects.
Covers backdrop-filter for glass effects.

Available CSS Filters

blur(px) — Gaussian blur. blur(4px) for a light defocus, blur(20px) for a heavy background blur. brightness(%) — adjusts light level. 100% is normal, 150% is brighter, 50% is darker. contrast(%) — adjusts difference between light and dark. 100% is normal. grayscale(%) — removes color. 100% is fully desaturated. sepia(%) — applies a warm brown tone. 100% is full sepia. hue-rotate(deg) — shifts all colors around the color wheel. saturate(%) — adjusts color intensity. 200% is oversaturated, 50% is muted. invert(%) — inverts colors. 100% is full negative. drop-shadow() — like box-shadow but follows the element's alpha shape (works on transparent PNGs and SVGs).

Combining Multiple Filters

Chain filters in a single declaration:

💡 Tip

Always include -webkit-backdrop-filter alongside backdrop-filter for Safari support. Without the prefix, the effect is invisible to roughly 25% of mobile users.

img:hover {

filter: brightness(1.1) contrast(1.05) saturate(1.2);

}

Filters are applied in order — the output of one feeds into the next. A common pattern for image hover effects: slightly increase brightness, contrast, and saturation to make the image 'pop' on hover.

Popular Hover Effects

Grayscale to color: filter: grayscale(100%) on the image, filter: grayscale(0%) on hover. Blur to sharp: filter: blur(2px), hover removes blur. Sepia vintage: filter: sepia(80%) brightness(0.9). Dark overlay alternative: filter: brightness(0.6), hover restores brightness(1). The CSS Filter Playground lets you adjust all filter values with sliders and see the effect on a live preview.

⚠ Warning

On iOS Safari, backdrop-filter inside a position: fixed element can cause severe scroll performance issues. Test thoroughly on real iOS devices.

backdrop-filter for Glass Effects

backdrop-filter applies filters to the area behind an element rather than the element itself:

.glass {

backdrop-filter: blur(16px) saturate(180%);

background: rgba(255, 255, 255, 0.05);

}

This creates a frosted glass effect — the background content is blurred and slightly color-boosted, while the element's own content stays sharp. Used for navigation bars, modals, and card overlays.

Frequently Asked Questions

What CSS filters are available?+

blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity, and drop-shadow. They can be chained in a single filter declaration and animated with transitions.

Can I animate CSS filters?+

Yes. Use transition: filter 0.3s ease and change filter values on hover or other states. Filters are GPU-accelerated, so animations are generally smooth.

What is the difference between filter and backdrop-filter?+

filter applies effects to the element itself and its contents. backdrop-filter applies effects to the area behind the element, creating glass and blur overlay effects.

Try it yourself

Use the CSS Filter Playground — free, no signup required.

⚡ Open CSS Filter Playground

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

📚 References & Further Reading