Stack CSS filters — blur, brightness, contrast, saturation, grayscale, sepia, hue-rotate, invert — with a before/after preview and the composed filter declaration.
Settings
Generated locally in your browser — your settings and results never leave this page.
Image editing in a declaration
CSS filters process an element like a photo app: blur, brightness, contrast, saturation, grayscale, sepia, hue rotation, inversion — stackable in one declaration, applying to images, video and any element alike. The before/after preview shows exactly what your stack does to a reference swatch.
Worked example
/* uniform thumbnail treatment */
.thumb {
filter: brightness(105%) contrast(90%) saturate(70%) sepia(20%);
}
/* disabled state — one line desaturates everything */
.disabled {
filter: grayscale(100%) contrast(90%);
}Filter vs backdrop-filter — the key distinction
- filter affects the element itself and its children. backdrop-filter affects what shows THROUGH the element — the frosted-glass effect, which has its own tool: the Glassmorphism Generator.
Performance
- Blur is the expensive function and scales with area — fine on thumbnails, janky animated on heroes. The color functions are cheap. Filters promote elements to their own compositing layer, which is usually a win.
Use cases
- Consistent photo treatments across user-uploaded imagery, hover reveals (grayscale→color), disabled states, dark-mode image dimming (brightness(80%)).
How to use the CSS Filter Generator
- Stack filter effects with sliders — blur, brightness, contrast, saturation, tone effects.
- Compare the before/after swatches.
- Copy the composed filter declaration.
Frequently asked questions
What is the difference between filter and backdrop-filter?
filter affects the element itself (and its children); backdrop-filter affects what shows THROUGH it — the frosted-glass effect. This tool is the former; the Glassmorphism Generator is the latter.
Do filters affect performance?
Blur is the costly one, scaling with area. Small elements are fine; animating blur on large surfaces janks. The rest (brightness, contrast, saturate, hue-rotate) are cheap.
What is grayscale(100%) good for in UI?
Disabled and inactive states — one declaration desaturates icons, images and colors consistently. The "Disabled state" preset is exactly that pattern.
