CSS Filter Generator
Stack blur, brightness, contrast, saturation, hue and more, and copy the filter.
Processing: This tool runs entirely in your browser. Your input and any file you open stay on your device — nothing is uploaded to a server.
How to use the css filter generator
- Adjust the controls and watch the preview update.
- Read the generated CSS below the controls.
- Copy it into your stylesheet.
About this tool
The filter property applies graphical effects to an element and everything inside it, in the order listed. It is the same machinery behind the image adjustment tools here, except it stays live in the page rather than being baked into a file.
Because filters affect the whole element including its text and children, applying one to a container is rarely what you want — a blur on a card blurs its text too. Apply it to the image itself, or to a pseudo-element behind the content.
One notable exception is drop-shadow, which follows the alpha channel of the content rather than its box. That is how you cast a shadow from a transparent PNG or an icon's actual outline instead of its rectangle.
Common uses
- Dimming a background image behind text.
- Making a greyscale hover state that returns to colour.
- Casting a shadow from a transparent logo's real shape.
Frequently asked questions
- What is the difference between filter: drop-shadow and box-shadow?
- box-shadow follows the element's rectangle. drop-shadow follows the alpha channel, so a transparent PNG or icon casts a shadow from its actual shape.
- Why did my text blur too?
- filter applies to the element and all its descendants. Put the filter on the image itself, or on a background layer behind the text.
- Are filters expensive?
- Blur is the costly one, especially at large radii on large elements. The others are generally cheap.