Glassmorphism
Create frosted glass effects for modern UI with adjustable blur, tint, and radius.
Free & unlimited
Glass presets
Layout
Viewport
Glass card
This is a glassmorphism effect with adjustable blur and transparency.
Button
Secondary
Background
16px
25%
30%
16px
10%
Tip: Always include -webkit-backdrop-filter for Safari support. Upload your own background image to see exactly how the glass effect will look in your design. Try Randomize to discover unique combinations.
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}All processing happens in your browser. No data is sent to any server.
About this tool
- 1
Adjust blur
Set the backdrop-filter blur amount.
- 2
Set transparency
Adjust the background opacity.
- 3
Customize border
Add a subtle border for the glass edge effect.
- 4
Copy CSS
Copy the glassmorphism CSS code.
- Glassmorphism works best over colorful or image backgrounds.
- Keep blur between 10-20px for the classic frosted glass look.
- A subtle white border enhances the glass edge effect.
- This effect requires backdrop-filter support (all modern browsers).
- Blur control
- Opacity
- Border
- Background
- Live preview
- CSS output
- Create modern UI cards with frosted glass effect.
- Design overlay panels and modals.
- Build trendy landing page elements.