CSS Filter Generator

Compose a CSS filter: chain in your browser. Toggle each of the ten CSS filter functions on or off, set its value with a slider and a number input, and see the result live on a sample image. Eleven curated presets — Grayscale, Sepia, Vintage, Dramatic, Cool, Warm, High Contrast, Fade, Lomo, Invert, None — one click loads. Paste any existing filter: value and the controls follow. Copy the canonical CSS with one click. Pure client-side, no upload.

0
filter:
filter: none;

Ready.

Presets

One click loads the chain and enables the matching layers.

Layers

Toggle a layer on to add it to the chain. Sliders and number inputs stay in sync.

Reference & notes
  • Order of operations. CSS applies filters left-to-right, so blur(4px) grayscale(50%) blurs the original, then desaturates the blur. The page renders layers in the canonical CSS order (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia) so two chains with the same enabled layers always emit the same string.
  • Identity values (brightness 100%, contrast 100%, saturate 100%, opacity 100%, hue-rotate 0deg) are not visually different from "off" — but they still appear in the chain if the layer is enabled. Toggle the layer off if you want the chain to be shorter.
  • drop-shadow accepts <offset-x> <offset-y> <blur> <color>. The colour is the last token that does not parse as a number — #000, red, rgba(0,0,0,0.5) all work.
  • Presets override every enabled layer they touch and disable everything else, so applying a preset always gives you a clean state. Toggle individual layers after applying a preset to tweak.
  • Import. Paste any filter: value (with or without the filter: prefix) — the controls will follow. Unknown / vendor-prefixed functions are silently ignored.
  • Intensity is a heuristic, not a perceptual metric. It's a sum of each enabled layer's deviation from its identity value, soft-compressed to a 0–100 scale. Useful as a "how aggressive is this chain?" sanity check, not as a guarantee.
  • The page is built on top of src/lib/tools/css-filter.ts — every helper on this page is unit-tested (37 cases). Nothing leaves your browser.