CSS Glassmorphism Generator
Create frosted glass UI effects with backdrop-filter. All processing happens in your browser.
Glass Card
This is a preview of the glassmorphism effect with your current settings.
CSS
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);#6366f1
#ffffff
Blur16px
Background Opacity15%
Saturation120%
Border Opacity30%
Frequently Asked Questions
What is glassmorphism in CSS?▾
Glassmorphism is a UI design trend that creates a frosted glass effect using CSS. It combines a semi-transparent background, backdrop-filter: blur(), and subtle borders to make elements appear like frosted glass panels. It was popularized by Apple and Microsoft in their recent UI designs.
How does backdrop-filter work?▾
The backdrop-filter CSS property applies visual effects to the area behind an element. Unlike filter (which affects the element itself), backdrop-filter blurs or adjusts the content visible through a semi-transparent element. Common values include blur(), brightness(), and saturate().
Is glassmorphism supported in all browsers?▾
backdrop-filter is supported in Chrome 76+, Firefox 103+, Safari 9+, and Edge 17+. For older browsers, consider providing a fallback with a solid semi-transparent background. Use @supports (backdrop-filter: blur(1px)) to detect support.
How do I make glassmorphism accessible?▾
Ensure sufficient color contrast between text and the blurred background. Test with different background content and colors. Add a higher-opacity fallback background for users who prefer reduced motion or transparency. Keep text sizes readable and avoid placing small text on busy backgrounds.
What background works best with glassmorphism?▾
Glassmorphism looks best against colorful, gradient, or image backgrounds. The frosted glass effect needs visible content behind the element to be noticeable. Vibrant gradients, colorful images, or layered shapes behind the glass panel create the most striking visual effect.