CSS Filter Generator

12 tools

Design blur, brightness, and other CSS filters visually.

Runs in your browser — your files and text stay on your device

Design Flexbox and Grid layouts, shadows, animations, easing curves, filters, and glassmorphism effects with live controls and a live preview instead of guessing values by hand — copy the generated CSS straight into your stylesheet.

Flexbox Playground Grid Generator Box Shadow Text Shadow Border Radius Clip Path Glassmorphism Animation Easing Curve Filter Fluid Typography Unit Converter

Blur0px

Brightness100%

Contrast100%

Saturate100%

Grayscale0%

Sepia0%

Hue rotate0deg

filter: blur(0px) brightness(100%) contrast(100%) saturate(100%) grayscale(0%) sepia(0%) hue-rotate(0deg);

How to use this tool

1Adjust the blur, brightness, contrast, saturation, grayscale, sepia, and hue-rotate sliders.
2Watch the live preview update.
3Copy the combined filter CSS value.

Frequently asked questions

Can I apply this to an actual photo, not just the preview box?

Yes — copy the filter value and apply it to any element's CSS, including an <img>.

Is this generated on a server?

No — the preview and CSS are computed entirely in your browser.

Guides

All guides →