CSS Filter Generator
Apply CSS filters — blur, brightness, contrast, saturation and more — and copy the code.
Image and element effects in CSS
CSS filters apply visual effects — blur, brightness, contrast, grayscale, hue shifts and more — directly to elements and images without editing the source file. This lets you adjust the filters visually and copies the code, so you can tune an effect precisely and see it live.
Adjust the filters and copy the CSS.
Non-destructive, and stackable
The advantage of CSS filters over editing an image is that they are non-destructive and dynamic: the original file is untouched, the effect applies live, and it can change on hover or with an animation. Filters also stack, so you can combine several — a touch of brightness, a little contrast, a slight blur — for a compound effect, though piling on too many hurts performance and usually looks overdone. Common practical uses include dimming an image behind text, greying out a disabled element, or a subtle blur on a background. Adjusting them visually lets you find the restrained combination that enhances rather than the heavy one that overwhelms.
Common questions
What can CSS filters do?
Apply blur, brightness, contrast, grayscale, hue shifts and more to elements and images live, without editing the source file.
Can I combine filters?
Yes — they stack for compound effects, though too many hurt performance and usually look overdone. A restrained combination works best.
Is anything uploaded?
No. It runs entirely in your browser.