Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur.
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px;
How to Use the Glassmorphism Generator
Pick a background color with the color picker, then adjust the background opacity slider to control transparency. Use the blur amount slider to set the frosted glass intensity. Adjust the border opacity to make the edge more or less visible. Set a border radius for rounded corners. The preview updates in real time on a colorful gradient background so you can see the glass effect clearly. Click "Copy CSS" to copy the generated code.
Frequently Asked Questions
What is glassmorphism?
Glassmorphism is a design trend that uses background blur and transparency to create a frosted glass effect. It's achieved with CSS backdrop-filter: blur() combined with a semi-transparent background.
Which browsers support backdrop-filter?
All modern browsers support backdrop-filter including Chrome, Firefox, Safari and Edge. The generator includes the -webkit- prefix for older Safari versions.
Why does my glass effect look flat?
Make sure your glass element sits on top of colorful content — the blur effect needs visible content behind it to look like frosted glass. Increase the blur amount and lower the background opacity for a stronger effect.
Can I use glassmorphism on dark backgrounds?
Yes! Change the background color to a dark shade and adjust opacity and blur. Glassmorphism works great on both light and dark backgrounds.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →