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.

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%);

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.

More CSS utility tools

From our directory of 30+ CSS tools.

Browse all →

utilities

Flexbox Froggy

Learn CSS Flexbox through 24 interactive coding puzzles with frogs.

#flexbox#learning#interactive

utilities

Cubic Bezier

Drag control handles to create and compare custom CSS easing curves.

#easing#animation#timing-function

utilities

Easing Functions Cheat Sheet

Visual reference for every CSS easing function with live animation demos.

#easing#animation#reference

utilities

Tailwind CSS Cheat Sheet

Searchable, filterable reference for every Tailwind CSS utility class.

#tailwind#reference#cheatsheet

utilities

CSS Reference

Visual, illustrated reference for every CSS property with live examples.

#reference#documentation#properties

utilities

CSS-Tricks

The definitive CSS reference, almanac, and tutorial hub for developers.

#reference#tutorials#almanac

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →