CSS Tools
CSS Glassmorphism Generator
Create a frosted-glass UI card with live preview over a gradient background. Dial in blur, opacity, and border then copy the ready-to-use CSS.
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
}How glassmorphism works
Three CSS properties create the glass effect: backdrop-filter: blur() blurs whatever is behind the element, a semi-transparent background lets the blurred content show through, and a translucent border adds the frosted edge highlight.
background: rgba(255,255,255,0.15);backdrop-filter: blur(12px);border: 1px solid rgba(255,255,255,0.3);Frequently asked questions
What is glassmorphism?
Glassmorphism is a UI trend that makes elements look like frosted glass. Key properties are backdrop-filter: blur(), semi-transparent background, and a subtle border.
Does backdrop-filter work in all browsers?
backdrop-filter is supported in all modern browsers. For Safari you need -webkit-backdrop-filter as well, which this generator includes.
Why does my glass effect not show?
backdrop-filter only works when there is content behind the element. Make sure the glass card sits over a colorful background or image.
How do I choose the right opacity?
Typically 10-25% for the background gives a good glass look. Too high and it looks opaque; too low and text becomes unreadable.