OneTaskBy Tim King · Updated
CSS Backdrop Filter Generator
Blur, Brightness and Hue-Rotate Over a Busy Background, Prefixed CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Backdrop Filter Generator works
This CSS backdrop filter generator writes the rule for you. backdrop-filter applies a filter to whatever sits behind an element rather than to the element
itself. This generator lets you stack the seven filter functions, watch the effect over a deliberately
busy background, and copy the rule with the -webkit- prefix that Safari still needs.
How the CSS backdrop filter works
The ordinary filter property changes the element it is applied to: blur a photo, desaturate an icon.
backdrop-filter is the same set of functions pointed the other way. The element itself is untouched;
instead the browser takes everything painted beneath it, runs that through the filter, and then paints
the element on top. It is what makes frosted-glass headers, blurred modal overlays and translucent
sidebars possible without duplicating the content behind them.
The functions and what each does. blur() is the one people reach for — a Gaussian blur measured in
pixels, where 4–12px is a subtle frost and 20px and up dissolves the background into colour fields.
brightness() and contrast() take percentages with 100% as no change; dropping brightness to 60–80%
darkens what is behind a light overlay so white text stays readable. saturate() above 100% is the
secret of the Apple-style glass look, because blurring alone mutes colour and a saturation boost puts
it back. grayscale(), hue-rotate() and invert() are rarer in production but useful for focus
states, image-heavy overlays and dark-mode tricks.
Order matters. Filter functions apply left to right, and blur-then-saturate looks different from saturate-then-blur. This tool writes them in a fixed, conventional order — blur first, colour adjustments after — which is what most design systems use. Reorder them by hand if you have a reason.
The element needs to be see-through. If your panel has an opaque background, the backdrop filter is
computed and then hidden behind it. Use a semi-transparent background — an rgba() or hsla() with
an alpha of 0.1 to 0.5 — or no background at all. The preview here uses a faint white tint and a light
border so the panel edge is visible over any backdrop.
The prefix. Safari supported backdrop-filter under the -webkit- prefix for years before the
unprefixed form shipped, and older iOS versions still only understand the prefixed one. The generated
code includes both, unprefixed last so it wins where both are understood. Do not drop the prefix until
your analytics say you can.
Cost. A backdrop filter forces the browser to composite the area behind the element every frame it
changes, and blur in particular is expensive on large areas. Keep blurred panels reasonably sized, avoid
stacking several on top of each other, and be careful with blur under a position: fixed header that
sits over scrolling content, since every scroll frame re-runs the filter. Test on a mid-range phone,
not just a laptop.
Fallback. Wrap the rule in @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) and give the element a more opaque background outside it. Without the filter, a 15% white
tint over a photo is unreadable; with an 85% tint it is fine, and only the browsers that can blur get
the thinner glass.
FAQ
Why is my backdrop-filter not doing anything?
Almost always because the element has an opaque background covering the filtered area, or because an
ancestor has overflow: hidden, transform, filter or will-change that creates a new containing
block and breaks the backdrop. Remove the background first, then check the ancestors.
Do I still need the -webkit- prefix?
For Safari on older iOS and macOS versions, yes. The unprefixed property landed in Safari 18, and
earlier versions only honour -webkit-backdrop-filter. The generated rule includes both lines, which
costs nothing and is harmless where the unprefixed form is understood.
Is backdrop-filter slow?
Blur over a large area is the expensive case. It is fine for a header bar or a modal, and poor for a full-screen overlay stacked on top of another blurred element. Keep the blur radius modest and test scrolling performance on a phone before shipping.
What is the difference between filter and backdrop-filter?
filter changes the element itself and its children. backdrop-filter changes only what is painted
behind the element and leaves the element's own content sharp. For a frosted panel with readable text
inside, backdrop-filter is the one you want.
Why does the blur look washed out?
Blurring averages neighbouring pixels, which pulls saturated colours towards grey. Add saturate(150%)
or thereabouts after the blur to restore the colour intensity — the preset most glass designs use is
roughly blur(12px) saturate(160%).
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Image Filter Sandbox
Slide eight filter functions and copy the CSS declaration.
Mesh Gradient Generator
Pure-CSS mesh gradients from stacked radial layers.
Age Gate Builder
Age verification overlay with yes/no or date-of-birth check.
Animated Banner
Design an animated ad banner and export GIF or WebM.
Animated Counter
Make a number count-up animation and copy the code.