Skip to content
uxTools
Design & CSS

CSS Filter Generator

Build a CSS filter chain visually with all 10 functions, preview on an image and text sample, pick from curated presets, then copy CSS, Tailwind, React inline, SCSS, or JSON.

Live preview

Pick a sample image or drop in your own, then tune the filter chain on the right.

Source
Background
Sample portrait illustration

The quick brown fox

Jumps over the lazy dog with the same filter applied

Presets

Tap a preset to fill the chain — tweak from there.

Filter chain

2 / 12

Order matters — the browser applies filters from top to bottom.

  • #1
    px
  • #2

Code output

CSS, Tailwind utilities, React inline, SCSS variable, or JSON.

filter: blur(2px) saturate(1.3);