CSS Filter Generator
Stack blur, brightness, contrast, grayscale, and more into a CSS filter with a live preview.
Drag the sliders to stack CSS filter effects on the preview. Only the effects you change show up in the output, and the CSS works on any element, not just images.
filter: none;About CSS Filter Generator
Drag sliders for blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. The preview updates as you go, and the output only lists the effects you actually changed. Copy the filter rule when it looks right.
How it works
Each slider maps to one CSS filter function. Move blur to soften, push brightness or contrast above 100% to boost them, or drop them below to dim. Grayscale, sepia, and invert run from 0 to 100%, hue-rotate spins the colors around the wheel, and saturate controls how vivid things look. The preview shows the combined result on both a gradient and text, and the CSS output skips any effect left at its default so you ship a clean rule.
When you'd use this
- Dimming a hero image so overlaid text stays readable
- Building a grayscale or sepia hover state for thumbnails
- Faking a frosted-glass look with blur and a brightness bump
- Matching a brand color cast with hue-rotate and saturate
- Previewing how a filter stacks before writing the CSS by hand
Filter order and stacking
CSS applies filter functions left to right, so the order can change the result - blur then brightness looks different from brightness then blur. This tool emits them in a consistent order and only includes the ones you've changed. The same filter property works on images, backgrounds, text, and any other element, which makes it handy well beyond photo effects.