CSS Glassmorphism Generator
Adjust the backdrop blur, glass tint color and opacity, border opacity, and corner radius with live sliders over a colorful background, then copy the exact CSS code (including the WebKit prefix for Safari).
Design & CSS Tools Runs entirely in your browser
All processing happens on your device — nothing is sent to a server.
CSS code
background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 20px;
What this tool does
Builds the frosted-glass effect in CSS: a backdrop blur with a translucent tint, a light border and rounded corners, with a preview and code.
When to use it
- A card or top bar with a glass effect over a colourful background.
- A modal you want partially translucent.
- An interface element following this visual style.
How to use it
- Set the "Backdrop blur", the "Glass tint" and the "Tint opacity".
- Set the "Border opacity" and "Corner radius".
- Copy the "CSS code".
A practical example
Input
A moderate blur with a light tint at low opacity.
Output
CSS producing a glass card through which what sits behind it shows blurred.
Limitations
- The effect needs a colourful background or an image behind the element to be visible at all; over a solid white background nothing shows.
- Backdrop blur is expensive to render, and many instances on one page can slow weaker devices.
- Text over glass has a contrast that changes with what is behind it; check it against the worst-case backdrop.
- Some older browsers do not support backdrop blur and show the element tinted but unblurred.
Privacy and processing
The effect is composed on your device and nothing is sent anywhere.
Technical notes
- Tint opacity and border opacity are separate because it is the faint border that gives the glass its edge.