This tool builds a CSS filter chain visually, with live sliders for each filter function and a real-time preview. Adjust blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia, then copy the exact declaration. It saves you remembering each function’s unit and value range.
How it works
The CSS filter property takes a space-separated list of functions, applied left to right. Each slider maps to one function with its correct unit:
| Function | Unit | Default | Notes |
|---|---|---|---|
| blur | px | 0 | Higher values = more blur; 4–8px is noticeably soft |
| brightness | % | 100 | Below 100% darkens; above 100% lightens |
| contrast | % | 100 | Above 100% increases contrast; 0% = solid grey |
| grayscale | % | 0 | 100% = fully black and white |
| hue-rotate | deg | 0 | Shifts all hues around the colour wheel |
| invert | % | 0 | 100% = full negative image |
| opacity | % | 100 | 0% = transparent; acts like opacity property |
| saturate | % | 100 | 0% = desaturated; above 100% = oversaturated |
| sepia | % | 0 | 100% = warm brown-toned vintage look |
The generator only includes functions that differ from their default value, so the output stays clean and minimal. The same string powers the live preview.
Worked examples
Black and white photo with boosted contrast:
filter: grayscale(100%) contrast(115%) brightness(105%);Removing colour and boosting contrast slightly produces a crisp monochrome image.
Frosted glass backdrop:
/* On the overlaying element */
.glass { backdrop-filter: blur(8px) brightness(90%) saturate(150%); }Note: backdrop-filter (not filter) applies to what is behind the element —
use it for frosted-glass cards and modals. filter applies to the element and
its own content.
Vintage sepia tone:
filter: sepia(70%) contrast(90%) brightness(105%);Full sepia (100%) looks harsh; 70% combined with a small brightness and contrast adjustment reads as a natural warm vintage tone.
Hover colour shift:
img { filter: none; transition: filter 0.25s ease; }
img:hover { filter: hue-rotate(30deg) saturate(130%); }Shifting the hue and boosting saturation on hover is a quick way to add visual feedback to image grids without JavaScript.
Filter vs backdrop-filter
filter applies to an element’s own rendering, including its children and any
background. backdrop-filter applies only to the area behind the element,
letting you blur or tint a glass-like overlay while the element’s own content
stays unfiltered. Both accept the same function syntax. This generator produces
filter declarations; simply prefix with backdrop-filter: for the overlay effect.
Order matters
Filters are applied sequentially left to right, so the output of one becomes the
input of the next. blur(4px) brightness(150%) brightens an already-blurred image,
which is different from brightness(150%) blur(4px) where blurring spreads the
brightened pixels. For most natural effects the differences are subtle, but
hue-rotate before versus after grayscale is more noticeable — once colour is
removed, hue rotation does nothing.
Everything runs locally in your browser — nothing is uploaded.