CSS Glassmorphism Generator
Build frosted-glass (glassmorphism) effects.
Tint color
Generated CSS
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
}Generate Glassmorphism Effects
Glassmorphism is the frosted-glass look â a translucent, blurred surface that shows a hint of what's behind it. It relies on a semi-transparent background plus backdrop-filter: blur(). This generator dials in the effect and copies the cross-browser CSS.
The recipe
- A semi-transparent background color
- backdrop-filter: blur() for the frost
- A subtle 1px translucent white border
- Rounded corners and often a soft shadow
Browser note
backdrop-filter needs the -webkit- prefix for Safari, which this tool includes. The effect only shows over content behind the element, so it needs a colorful or image background underneath.
Private & Processed Locally
The CSS is generated in your browser; nothing is uploaded.
Frequently Asked Questions
Common questions about the CSS Glassmorphism Generator.
What is glassmorphism?
A frosted-glass look using a semi-transparent background plus backdrop-filter: blur().
Does it support Safari?
Yes, the generated CSS includes the -webkit-backdrop-filter prefix for Safari.
Is it private?
Yes, the CSS is generated in your browser.