Refract

Glassmorphism CSS generator

Build frosted glass panels with backdrop-filter. Change the blur, transparency and highlight, check it over three different backdrops, then copy the CSS.

Free · no sign-up · copy and paste

Controls

CSS









How to use the glassmorphism generator


  1. Pick a backdrop. Glass needs something colourful behind it. Switch between Aurora, Sunset and Grid to see how the effect holds up on different content.
  2. Set the blur and transparency. Blur between 10px and 20px reads as frosted glass. Keep transparency low (around 0.1 to 0.25) so the background still shows through.
  3. Add a highlight and shadow. A thin, semi-transparent white border catches the light along the edge. A soft shadow lifts the panel off the page.
  4. Copy the CSS. Press Copy CSS and paste the rule into your stylesheet. Swap .element for your own class name.


What is glassmorphism?
Glassmorphism is a UI style where panels look like frosted glass: you can see shapes and colour behind them, but blurred. It became popular through macOS Big Sur and Windows 11, and works well for cards, navigation bars and overlays that sit on top of imagery.
How the CSS works
The effect comes from backdrop-filter: blur(), which blurs whatever is behind the element rather than the element itself. A semi-transparent background tints the glass, and adding saturate() to the filter keeps colours from looking washed out. The -webkit- prefixed version is still needed for Safari.
Accessibility tips
Text on glass can lose contrast when the content behind it changes. Check contrast against the lightest and darkest parts of your background, or raise the opacity of the tint behind text. Users who turn on reduced transparency in their operating system can be served a solid background with the prefers-reduced-transparency media query.


Frequently asked questions


Does backdrop-filter work in all browsers?
Yes. backdrop-filter is supported in current versions of Chrome, Edge, Firefox and Safari. Keep the -webkit-backdrop-filter line for older Safari versions.
Why can't I see the blur?
The element needs content behind it with detail or colour changes. Over a flat colour, blurred glass looks the same as a transparent box.
Is glassmorphism bad for performance?
Blurring is done by the graphics card and is fine for a few elements. Avoid applying it to dozens of elements at once or to elements that animate constantly, especially on low-end phones.