CSS Filter Generator
Build CSS filter effects like blur, brightness, and contrast with live preview and copy-ready code. Free, no signup needed.
Preparing private browser tool…
Frequently asked questions
- Which filter functions are supported?
- blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, and drop-shadow. Stack any combination.
- drop-shadow vs box-shadow?
- drop-shadow follows alpha channel so respects PNG/SVG transparency. box-shadow only renders around the rectangular box.
- Works on images and videos?
- Yes. CSS filters work on any element including img, video, svg, and divs.
- What ranges do the sliders cover?
- Blur 0 to 20 px, brightness, contrast, and saturate 0 to 200 percent, grayscale, invert, and sepia 0 to 100 percent, hue-rotate 0 to 360 degrees, and drop-shadow offsets from -30 to 30 px with blur up to 30 px.
- Does the order of the functions matter?
- Yes. CSS applies filter functions left to right, so blur before brightness looks different from the reverse. The tool always emits them in one fixed order, so rearrange the copied value if you need another sequence.