CSS Glassmorphism Generator
Build a glassmorphism (frosted glass) effect with adjustable blur, transparency and border, with a live preview and copyable CSS.
Your file is processed locally in your browser and is not uploaded to our server.
px
%
%
px
Glass card
CSS
background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 16px;
How to use CSS Glassmorphism Generator
- 1Adjust blur, background opacity, border opacity and corner radius.
- 2See a live glassmorphism card preview over a colorful background.
- 3Copy the generated CSS.
Frequently asked questions
It is supported in all modern browsers, though older versions of Firefox required a flag. Include the -webkit- prefix for best Safari support.
Related tools
Developer
JSON Formatter
Format and beautify JSON with adjustable indentation.
Developer
CSS Filter Generator
Build a CSS filter (blur, brightness, saturate, etc.) visually.
Developer
JSON Validator
Validate JSON and locate syntax errors.
Developer
CSS Animation & Transition Generator
Build a CSS transition or keyframe animation visually.
Developer
JSON Minifier
Minify JSON data by removing unnecessary whitespace and line breaks.