Tweak blur, opacity, colors, and shadows to design the perfect frosted glass effect. Copy the CSS code and use it in your web projects. Ideal for modern UI design, cards, modals, and navigation.
Use class .glass-card on any element. A colorful background behind is recommended.
Glassmorphism is a UI design trend that mimics the appearance of frosted glass — translucent, blurred backgrounds with subtle shadows and vibrant colors shining through. It gained mainstream attention with Apple’s iOS 7 (2013) and has evolved into a staple of modern interfaces. The effect is achieved primarily through the CSS property backdrop-filter: blur() combined with semi‑transparent backgrounds, soft borders, and shadows.
✨ “Glassmorphism creates depth without weight — elements feel tangible yet lightweight.”
Background color + Opacity (alpha): The base tint of the glass. Lower opacity makes the element more transparent, letting background colors/images show through. We use rgba() to control the alpha channel.
Blur (backdrop-filter: blur): This applies a Gaussian blur to everything behind the element. It’s the heart of glassmorphism. Larger values create a more diffuse, “frosted” look, but can reduce readability if overdone. Typical values range 8px – 20px.
Border radius: Soft, rounded corners reinforce the modern, friendly vibe. Glass cards often use large radii (15px – 30px).
Border and shadows: A thin, light border (often white with low opacity) gives the glass a defined edge. Box shadows add depth, making the card float above the background.
Box shadow: The classic 0 8px 32px rgba(0,0,0,0.2) works well; you can now control offset, blur, and opacity independently.
The term “glassmorphism” was popularized by Michal Malewicz in 2020, but the concept dates back to the “Acrylic” material in Microsoft’s Fluent Design and Apple’s “ProMotion” backgrounds. Designers love it because it adds hierarchy without harsh lines. It’s often paired with vibrant, gradient backgrounds (like the one in our preview) to emphasize the blur effect.
backdrop-filter is supported in all modern browsers (Chrome, Edge, Firefox, Safari) but may need a fallback for older browsers (e.g., a solid background). We include the -webkit- prefix for broader support.
background: rgba(255,255,255,0.3);
| Component | Why glass works | Example parameters |
|---|---|---|
| Cards / Modals | Creates layering, focuses attention | bg: white 0.2, blur 15px, radius 24px |
| Navigation bars | Adds modern translucency while keeping content legible | bg: dark 0.3, blur 8px, thin border |
| Profile UI / dashboards | Soft, premium aesthetic | bg: gradient tint, blur 20px, large shadow |
| Image overlays | Makes text pop over busy backgrounds | bg: black 0.3, blur 10px, radius 0 |
A designer wanted a “glassy” now‑playing card that adapts to album art. Using parameters bg: from album color at 0.25, blur 18px, radius 28px, white border 0.8px, the card felt like part of the artwork. The centroid of the color (extracted via JS) was fed into the generator, producing a dynamic glass effect. Users reported a more immersive experience.
backdrop-filter is GPU‑accelerated; minimal impact on modern devices.
Always test contrast. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text. Use a semi‑transparent background behind text, or add a subtle text shadow. Our generator’s preview includes a basic contrast indicator to help you evaluate readability.
filter: blur() blurs the element itself (including its contents). backdrop-filter blurs everything behind the element, leaving the element’s content (like text) sharp. For glassmorphism you always want backdrop-filter.
-webkit-backdrop-filter and the standard backdrop-filter for broader browser support.
backdrop-filter.
backdrop-filter (all modern ones do). Also check that the preview parent has a colorful background — otherwise the blur has nothing to blur.