Built-in toolFree · No signup

CSS Filter Generator

Visually adjust all nine CSS filter functions — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. Apply presets like Vintage, Dramatic B&W, or Cool, then fine-tune with sliders and copy the CSS.

Share on X LinkedIn

Live preview — filters applied to gradient

Presets

Filter Controls

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

CSS Output

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

Was this tool helpful?

How to use

Pick a preset

Start from Vintage, Dramatic B&W, Cool, Warm, Vivid, or Fade to quickly get a look you like.

Adjust sliders

Fine-tune each filter function independently using the labelled sliders. Values update the live preview in real time.

Reset anytime

Click 'Reset defaults' to return all filters to their neutral values and start fresh.

Copy CSS

Hit Copy CSS to grab the complete filter declaration and paste it into your stylesheet.