What does CSS Filter Generator actually do?

The CSS filter generator builds a filter property from blur, brightness, contrast, and related functions, with a preview. Filters apply to the whole element, including text and children. It is not a photo editor with layers.

When should I use CSS Filter Generator?

Use it to tune a single filter list for a thumbnail or a decorative image.

When should I not use CSS Filter Generator?

Do not blur text you still need people to read.

What does CSS Filter Generator not do?

filter is not backdrop-filter. Stacked functions run in the order written.

CSS Filter Generator

Visually build CSS filters: blur, brightness, contrast, grayscale, hue-rotate, sepia, more. Free online — runs locally, no upload.

Live Preview

Original

Filtered

Presets

blur0px

brightness100%

contrast100%

grayscale0%

hue-rotate0deg

invert0%

saturate100%

sepia0%

opacity100%

CSS Output

/* No filters applied */

Search tools

CSS Filter Generator