Build a CSS glass effect visually
Build a frosted-glass (glassmorphism) effect visually: blur, transparency, and border, with copyable CSS.
Blur controls how frosted the glass looks; the background color and opacity control its tint.
A soft white border and rounded corners are what sell the 'glass panel' look.
Includes the -webkit- prefixed backdrop-filter line Safari still needs.
Frequently asked
Why does the effect only show up against a busy background?
backdrop-filter: blur() blurs whatever is behind the element. Against a flat, single-color background there's nothing visible to blur, so the effect looks like it's doing nothing. It needs a textured or colorful backdrop (like the preview here) to actually read as frosted glass.
Why is there a -webkit-backdrop-filter line?
Safari requires the -webkit- prefixed version of backdrop-filter to render it. Without that line, the glass effect silently doesn't appear at all in Safari, even though the unprefixed property works everywhere else.
Why is the border always white?
A soft white border at low opacity is what reads as light catching the edge of a glass panel, the idiomatic look for glassmorphism. Using the same border color as the background tint tends to make the edge disappear instead.
Does backdrop-filter work in every browser?
It's supported in all current major browsers (Chrome, Firefox, Safari, Edge) as of recent versions, but very old browser versions may not support it. The element will just show its background color without the blur in that case.