CSS Filter Generator
Combine 9 CSS filter functions — blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, opacity — omitting untouched ones.
CSS filter generator
Live preview
Result
filter: none;filter: none;
What this CSS filter generator does
Drag the sliders to shape a CSS filter value from nine of the most-used filter functions, plus a drop-shadow() after them: blur() in pixels, brightness(), contrast() and saturate() as percentages, grayscale(), sepia(), invert() and opacity() as percentages, and hue-rotate() in degrees. “Start from a look” sets them all at once to a named look such as Vintage or Neon, ready to adjust. A live preview box shows the effect on colored content in real time, against whatever “Behind the preview” puts there — this page, white, black, a see-through checkerboard or a colour you pick, so invert(), opacity() and the drop shadow are judged on the background they will sit on, with the copied CSS unchanged — and the tool prints a ready-to-paste declaration like filter: blur(2px) brightness(120%); that you can copy with one click.
Clean output that omits the defaults
Only functions you actually change are written out. Anything left at its neutral value — 0 for blur, grayscale, hue-rotate and invert, or 100% for brightness, contrast, saturate and opacity — is dropped so the result stays short and readable. When every slider is neutral the value is simply none, which is a valid filter value you can drop straight into your stylesheet or an inline style attribute.
Frequently asked questions
Which CSS filter functions are supported?
Nine: blur (px), brightness (%), contrast (%), grayscale (%), sepia (%), saturate (%), hue-rotate (deg), invert (%) and opacity (%). Combine any of them and the tool builds a single filter value in that order.
Why are some functions missing from the output?
Functions sitting at their neutral value are omitted so the code stays clean — brightness, contrast, saturate and opacity at 100%, and blur, grayscale, hue-rotate and invert at 0. If nothing is changed, the value is none.
Can I try the filter on my own image, or add a drop shadow?
Yes. Load a picture from your device and the filter is applied to it, with an option to show the original beside it. A drop-shadow control sits after the sliders; unlike box-shadow it follows the shape of a transparent image.
Is there a ready-made look to start from, and how far can brightness go?
Yes. “Start from a look” sets every slider at once to a named look such as Vintage, Neon or Night vision, and leaves the drop shadow as it is. The list names the look for as long as the sliders still match it, and shows “Choose…” once one moves. Brightness, contrast and saturate reach far enough past neutral for strong looks like Neon, which takes saturate to the top of its slider; untouched functions are still left out of the code.
Which browsers support the CSS filter property?
Every current browser — Chrome, Edge, Firefox and Safari, on desktop and on phones — takes the unprefixed filter property, with every function this page writes and drop-shadow(). Only versions older than Chrome 53 and Safari 9.1, both released in 2016, needed the -webkit-filter prefix. Internet Explorer never supported it; its old filter property is a different, incompatible thing.
Can I change what is behind the preview?
Yes. “Behind the preview”, beside the compare checkbox, puts this page, white, black, a see-through checkerboard or a colour you pick behind the filtered frame — and behind both frames when comparing — so invert(), opacity() and a drop shadow are judged against the background they will really sit on. Only the preview changes; the copied CSS is the same.