Stacking filter functions on one line
filter applies effects such as blur, brightness and saturation to the element as it was painted. Several functions separated by spaces run from left to right, so the same values in a different order give a different result. This builder drops the fields left at their default and joins only the remaining functions, in order.
Which functions have a ceiling
grayscale, sepia, invert and opacity only mean anything within 0 to 100%, so values past that are blocked, while brightness, contrast and saturate have no upper limit and are passed through above 100%. Negative values are rejected for every function. Names and argument syntax follow the W3C Filter Effects specification (as of October 2026).
What it does not do
It does not write backdrop-filter, which blurs what sits behind the element; that is a different property with its own tool. The url() function that pulls in an SVG filter is out of scope, and so is box-shadow.
Frequently Asked Questions
It does. Functions run left to right, so putting grayscale first leaves the later hue-rotate with no color to turn and it does nothing.
The result equals 100%. Nothing changes past the ceiling, so this tool only accepts values within 0 to 100%.
filter works on the element itself, while backdrop-filter works on whatever sits behind it. They are separate properties and need separate declarations.