CSS Filter Generator

In short CSS filters apply image processing to any element, not just images — blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia and drop-shadow, chained left to right in a single declaration. The chaining order matters and is the thing most people get wrong: `grayscale(1) sepia(1)` gives a sepia photograph, while `sepia(1) grayscale(1)` gives a grey one, because each filter operates on the output of the last. Read the chain as a pipeline rather than as a set of options. `drop-shadow` is the one worth knowing about specifically, because it is not the same as `box-shadow`. It follows the actual shape of the content including transparency, so it will shadow the outline of a PNG logo or an irregular clip-path where a box shadow would draw a rectangle around it. Two performance notes. Filters run on the GPU and are cheap to animate — except `blur`, which is expensive at large radii and more expensive still on a large element. And a filter creates a new containing block, which means `position: fixed` children of a filtered element stop being fixed to the viewport, a bug that is very hard to find if you do not know it.