CSS Filter Generator
Build a CSS filter or backdrop-filter — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow — with a live preview.
The filter: declaration in spec order, the same list as backdrop-filter with its -webkit- prefix, a preview rendered by your browser, and notes on ordering and paint cost.
Example: blur 4 px, brightness 110 % and a 2 px 4 px 6 px #0003 shadow give filter: blur(4px) brightness(110%) drop-shadow(2px 4px 6px #0003); all controls at neutral give none.
Ten functions,
in spec order.
What each filter function does, why the order matters, and how the preview works.
Functions
blur(px) softens; brightness, contrast and saturate scale around 100 %; grayscale, sepia and invert blend toward their effect from 0 %; hue-rotate turns the hue wheel by degrees; opacity fades; drop-shadow(x y blur colour) draws a shadow that follows the element’s alpha silhouette rather than its box. A control left at its neutral value emits nothing, so the declaration stays short.
Order
Filter functions are applied one after another in the order written, and the result depends on it — blurring then brightening is not the same as brightening then blurring, and a drop shadow placed after a blur is drawn from the blurred silhouette. The page emits functions in the specification’s listing order and says so; reorder by hand when you need a different pipeline.
backdrop-filter and the preview
The same list works as backdrop-filter, which filters what lies behind the element; Safari still needs the -webkit- prefix, so both lines are emitted. The preview is your browser rendering the identical declaration on a fixed test card — no image is generated or uploaded. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
Last reviewed 21 September 2026. How results are checked: How we verify.