How the effect works
- Transparent background — rgba white or another colour at 15–30 % opacity.
- backdrop-filter: blur() — blurs whatever is behind the element.
- saturate() — boosts the colours seen through the glass.
- A thin border — a slightly more opaque edge makes the panel look like glass.
The effect only shows on top of something colourful — a gradient, photo or illustration — as in the preview.
Accessibility
Make sure text on glass panels still meets contrast requirements; check it with the Contrast Checker. The -webkit- prefix is included for Safari.
Frequently asked questions
Which browsers support backdrop-filter?
All current versions of Chrome, Edge, Safari and Firefox.
Why do I not see the blur?
There must be content behind the element; on a plain background there is nothing to blur.
Is glassmorphism bad for performance?
Large blurred areas can be heavy on low-end devices; use it for a few panels, not the whole page.