CSS Backdrop Filter Generator
Generate backdrop-filter CSS for translucent panels.
Frosted, translucent panels
backdrop-filter blurs and adjusts whatever sits behind an element, which is what gives navbars, modals, and cards that frosted-glass depth. This generator builds the CSS — including the Safari prefix — with a live preview over a busy background.
Because the effect is invisible over a flat color, a preview against real content is the only way to judge it. Tune the blur and adjustments, then copy the ready-to-use CSS. Remember it only shows over image or busy backgrounds.
Copy-ready backdrop CSS
backdrop-filter needs a semi-transparent background to show through, and the output includes the -webkit- prefix for Safari. Assembled locally in your browser.
Frequently asked questions
Why can't I see the blur?
backdrop-filter blurs what is behind the element, so the panel's own background must be partly transparent, like rgba(255,255,255,.35). A solid background hides the effect completely.
Do I need the -webkit- prefix?
Only for Safari versions before 18, which required -webkit-backdrop-filter. Add both lines if you support older iPhones and Macs.
What does the brightness value do?
It lightens or darkens the blurred backdrop: 1.08 brightens it by 8%, which helps light glass panels stay readable over busy images. Values below 1 darken it for dark-mode glass.
Related tools
Practical utilities for front-end design and implementation work.