Glassmorphism Generator
Design frosted glass UI effects and copy the CSS. Tune blur, opacity, borders, and shadows.
Background tint
#ffffff
Border tint
#ffffff
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}About This Tool
Glassmorphism Generator creates the CSS for frosted glass UI effects using backdrop-filter: blur() combined with semi-transparent backgrounds and borders. This effect became popular in macOS Big Sur, iOS 15, and Windows 11.
The effect combines four properties: background color with low alpha (rgba), backdrop-filter blur, a subtle border, and optionally a box-shadow. Adjust blur intensity, background transparency, and border opacity in real time.
Browser support for backdrop-filter is now over 95% globally. The generated CSS includes the -webkit- prefix for Safari. Copy the complete CSS block with one click.