CSS Filter & Backdrop-Filter Generator
Drag sliders for blur, brightness, contrast, hue-rotate, drop-shadow and more, watch a live preview, and copy the exact filter or backdrop-filter value. Everything runs in your browser.
over a busy background
Safari still needs the -webkit-backdrop-filter prefix, so the copied CSS includes both lines.
Built on your own device. The preview and the CSS string are computed with plain JavaScript — nothing you design is uploaded, and the page keeps working offline. Functions at their default value are omitted; an all-default filter is written as none.
filter vs backdrop-filter: the one distinction that matters
Both properties accept the exact same list of functions, but they touch different pixels. filter processes the element and its own contents — set filter: blur(8px) on an image and the image goes soft. backdrop-filter leaves the element itself untouched and instead processes whatever is painted behind it, which only shows through the parts of the element that are semi-transparent. That is the whole trick behind glassmorphism: a panel with a faint translucent background and backdrop-filter: blur(12px) stays crisp while the busy page beneath it turns to frosted glass. Because they are so easy to confuse, this tool keeps them as two separate modes, and the preview for backdrop-filter puts a translucent panel over a deliberately noisy background so you can actually see the blur happen.
The nine standard filter functions
Each function has an identity value that does nothing, and each moves one visual dimension:
| Function | Identity | What it does |
|---|---|---|
blur(px) | 0 | Gaussian softening; the radius is in px (percentages are not allowed) |
brightness(%) | 100% | Scales luminance; 0% is black, over 100% overexposes |
contrast(%) | 100% | Pushes tones toward or away from mid-grey |
grayscale(%) | 0% | Desaturates toward grey; 100% is fully monochrome |
hue-rotate(deg) | 0deg | Spins every hue around the colour wheel |
invert(%) | 0% | Flips colours; 100% is a photographic negative |
opacity(%) | 100% | Like the opacity property, but composable in the filter chain |
saturate(%) | 100% | Intensifies (over 100%) or mutes (under 100%) colour |
sepia(%) | 0% | Warm brown-toned wash; 100% is a full sepia photo |
There is a tenth function, drop-shadow(), which is different enough to deserve its own note below. This generator writes only the functions you move off their identity value — leaving the defaults out keeps the CSS short — and if you leave everything at its default the value collapses to the keyword none.
Why the order can matter
The browser applies filter functions left to right, piping each one's output into the next. For a single adjustment the order is irrelevant, but chains can differ: hue-rotate(120deg) grayscale(100%) and grayscale(100%) hue-rotate(120deg) do not match, because once an image is fully grey a later hue rotation has no colour left to spin. To keep the copied value deterministic no matter which slider you touched first, this tool always emits the enabled functions in a fixed canonical alphabetical order — blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia. When you specifically need a different chain order, copy the value and reorder the two functions by hand; it is the one case the canonical order cannot express for you.
Worked example: a frosted navigation bar
Switch to backdrop-filter mode, set blur to about 12px and saturate to roughly 140%, and you get the standard sticky-header glass look. In real CSS it needs three things working together:
.glass-bar {
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}The translucent background is not optional — backdrop-filter only shows where the element is see-through, so a solid background hides it entirely. The -webkit- line is there because Safari and iOS WebKit still require the prefix for backdrop-filter; the tool emits both lines for you in that mode. Bumping saturate above 100% is a common touch: blurring alone tends to wash colours out, and a little extra saturation puts the vibrancy back.
drop-shadow(): a shadow that follows the shape
filter: drop-shadow(x y blur color) is not the same as box-shadow. A box-shadow always traces the rectangular border box; drop-shadow follows the element's actual painted pixels — the opaque parts of a transparent PNG or SVG, or the glyphs of text — so it can cast a shadow off a cut-out logo or an irregular icon that box-shadow would only wrap in a rectangle. The trade-off: drop-shadow has no spread and no inset, just offset, blur and colour. Reach for it on transparent images and icons; reach for the dedicated Box-Shadow Generator for rectangular cards, where spread and inset earn their keep.
Honest limits
Filters are GPU-friendly but not free: a large blur() — especially backdrop-filter: blur() on a big, scrolling surface — can cost real paint performance on low-end phones, so use the smallest radius that looks right. backdrop-filter support is broad today but still lags plain filter: Safari needs the prefix, and a handful of stacking or clipping contexts can make the browser silently drop it, so always test the actual page rather than trusting the preview alone. Colours here are standard 8-bit sRGB, and the preview sample and frosted panel are stand-ins — your real content, its transparency and its background will change how the same value reads, so confirm on the true component. Finally, the percentage and pixel ranges the sliders expose are practical, not the CSS maximums: you can hand-edit the copied value to push a function further if you need to.