CSS Filter Generator

A filter is a pipeline, not a bag of settings. The specification is unambiguous about it: the list of functions are applied in the order provided, the first one takes the element itself as its input, and every one after that works on whatever the previous one produced. So grayscale then brightness raises a grey image, while brightness then grayscale brightens the colours and only then drains them — two different pictures from the same two numbers. This editor keeps the order visible, lets you move any step up or down, and leaves out anything sitting at the value that changes nothing.

How it is calculated

filter: <filter-function>+ | none

Ten functions are defined, and a value is a space separated list of them applied left to right. Blur takes a length and no percentage, because the number is the standard deviation of a Gaussian, not a distance to fade over. Hue-rotate takes an angle. The other seven take a number or a percentage, where 100% means the input passes through unchanged for brightness, contrast, saturate and opacity, and 0% means that for grayscale, sepia and invert. Drop-shadow is the odd one: two or three lengths and a colour.

Source: W3C Filter Effects Module Level 1 § 5 — the list of functions are applied in the order provided; the first filter function takes the element as the input image and subsequent operations take the output from the previous filter function as the input image

Questions people ask

Does the order of filter functions matter?

Yes, and it is the single most useful thing to know about the property. The specification says the list of functions are applied in the order provided, and that subsequent operations take the output from the previous filter function as the input image. grayscale(100%) brightness(150%) and brightness(150%) grayscale(100%) are different pictures.

Why is drop-shadow better than box-shadow on a transparent PNG?

Because drop-shadow works on the alpha mask of what is actually painted, so it traces the visible silhouette rather than the rectangle of the box. The trade-off is that its third length is a standard deviation, not a blur radius, so the same number spreads differently from box-shadow, and the specification does not accept a spread value or multiple shadows at this level.

Why does this tool stop grayscale and friends at 100%?

Because going past it changes nothing. Values of amount over 100% are allowed for grayscale, sepia, invert and opacity, but the specification tells browsers to clamp them to 1. Brightness, contrast and saturate genuinely keep going, so those run to 300% here — the specification sets no ceiling on them at all, and higher numbers are simply harder to steer with a slider.

Can hue-rotate go past 360 degrees?

In CSS, yes: implementations must not normalize the value, precisely so an animation can keep turning past a full circle. This tool covers one turn, since anything beyond that repeats what a static value looks like.

Why did my element suddenly stop being positioned relative to the viewport?

A filter other than none makes the element a containing block for absolutely and fixed positioned descendants, and creates a stacking context the same way opacity does. A fixed child inside a filtered parent will anchor to that parent instead of the viewport. It is the most common surprise after the ordering one.

Related tools