Create glassmorphism CSS: frosted, translucent cards with backdrop blur, saturation and borders. Preview live and copy the code. Free online generator.
On this page
About this tool
Create a translucent card style with backdrop blur, saturation and a border.
How to use CSS Glassmorphism Generator
Set Blur, Transparency and Saturation.
Choose Glass color, Border radius and Border opacity.
Copy the generated CSS and test it over the real page background.
Worked example
Place a lightly tinted card over a colorful background and adjust blur until the background is softened.
Why is the effect invisible on my page?
Backdrop blur needs visible content behind the element. A flat background or opaque card can make it hard to see.
Is the preview enough to ensure readability?
No. Test the card over every background it will cover and check foreground contrast.
Explore CSS Tools · More practical guides
Personalize your experience. Open with Ctrl+U (Option+U on Mac). Preferences stay in this browser when storage is available.
Menu language English (USA) Español اردو Accessibility Profiles Custom settings Vision support Reading support Reduced motion Motor support Focus support Oversized widget
Screen Reader Contrast + Smart Contrast Highlight Links Bigger Text Text Spacing Pause Animations Dyslexia Friendly Cursor Tooltips Page Structure Line Height Text Align Dictionary Saturation
Read aloud assistance Uses browser speech voices to read page text or selected text. This is not a replacement for NVDA, VoiceOver or another full screen reader. Available voices and speech processing depend on your browser and device.
Read page Read selection Pause / resume Stop reading
Reset All Accessibility Settings Move / Hide Widget Widget positionBottom right Bottom left Hide widget for 1 hour Restore at any time with Ctrl+U (Option+U on Mac).
Accessibility statement and help