Glassmorphism is the design trend that gives UI elements a frosted glass appearance — you can see blurred content through them, they have a subtle border, and they seem to float above the background. You have seen it in Apple's macOS interface, iPhone Control Centre, and countless modern web applications.
This guide explains the CSS behind glassmorphism, the properties that control each aspect of the effect, and how to generate ready-to-use code with a free online tool.
The CSS Behind Glassmorphism
Glassmorphism uses four CSS properties working together:
- backdrop-filter: blur() — blurs the content behind the element (the core of the effect)
- background: rgba() — semi-transparent white or colour fill so the blur shows through
- border — a thin, semi-transparent border that gives the "edge of glass" look
- box-shadow — subtle shadow for depth and lift
Basic Glassmorphism CSS
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}This is the starting template. The generator at webtoolsz.com/glass-generator lets you adjust all values visually and copies the exact CSS you need.
Step-by-Step: Create a Glassmorphism Effect
Go to webtoolsz.com/glass-generator. No account needed.
Control blur intensity, transparency, border opacity, and border radius. The live preview updates instantly.
Test against different background gradients or images to see how the effect looks in context.
Click Copy CSS and paste directly into your stylesheet. The code includes both the -webkit- prefix and the standard property.
Common Mistakes to Avoid
- No background image — the effect is invisible on plain white/solid backgrounds
- Too much blur — over 20px looks muddy and loses the glass quality
- Too low opacity — below 0.1, the element becomes illegible
- Missing -webkit- prefix — Safari still requires -webkit-backdrop-filter
- Text contrast — white text on a glass element needs a minimum contrast ratio. Test with a contrast checker.
Generate Glassmorphism CSS — Free
Visual editor. Live preview. Copy-paste CSS in one click. No sign-up.
Open Glassmorphism GeneratorFrequently Asked Questions
What is glassmorphism?
Glassmorphism is a UI design style characterised by frosted-glass appearance — semi-transparent backgrounds, blur effects, subtle borders, and a layered depth that lets background elements show through. It became mainstream with Apple macOS Big Sur in 2020 and has been widely adopted in web and app design.
What CSS property creates the blur effect?
The backdrop-filter: blur() property creates the frosted glass blur. It blurs whatever is behind the element. The key difference from filter: blur() is that backdrop-filter affects the background, not the element itself. Example: backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
Does glassmorphism work in all browsers?
backdrop-filter has good support in modern browsers (Chrome, Edge, Safari, Firefox 103+). Safari requires -webkit-backdrop-filter as a prefix. Internet Explorer does not support it. Always include both the -webkit- prefixed version and the standard version for maximum compatibility.
How do I choose the right blur and opacity values?
Start with blur between 8px and 16px, and background opacity between 10% and 30% (e.g. rgba(255,255,255,0.15)). Higher blur makes the glass look more frosted; lower makes it more transparent. The right values depend on the contrast of the background image behind the element.