CSS Glassmorphism Generator
Create CSS glassmorphism effects visually with live preview. Adjust blur, opacity, color, and border. Copy the CSS code for frosted glass UI. Free online tool.
Preview
Glassmorphism
10px
20%
30%
CSS Output
Reference
What is Glassmorphism?
Glassmorphism is a modern UI design trend that creates a frosted glass effect using CSS backdrop-filter. The effect features a semi-transparent background with a blur that reveals the content behind it, creating a sense of depth.
Browser support
The backdrop-filter property is supported in all modern browsers. For older WebKit browsers, the -webkit-backdrop-filter prefix is included. Note that this effect requires content behind the glass element to be visible.
Privacy
All glassmorphism generation runs 100% in your browser. No data is sent to any server.