CSS Glassmorphism Generator
Create frosted-glass UI elements. Adjust blur, opacity, and color — then copy the CSS code.
What Is CSS Glassmorphism?
Glassmorphism is a UI design style that simulates frosted glass. Elements appear translucent and blurred, as if made of glass placed over a colorful background. The trend became popular around 2020 alongside the release of macOS Big Sur, which used the effect extensively across system UI panels and cards.
The technique relies on four CSS properties working together: a semi-transparent background using rgba(), backdrop-filter: blur() to blur what sits behind the element, a translucent border to simulate the edge of glass, and border-radius to soften the corners. Optionally, a subtle box-shadow adds depth and separates the card from the background.
Glassmorphism works best when the element sits over a vibrant, multi-color background — gradients, images, or other colorful UI. On flat white or black backgrounds the blur effect has nothing to act on and the card looks simply transparent.
How to Use This Generator
Use the Blur slider to control how strongly the background behind the card is blurred. Values between 8px and 16px suit most UI cards; higher values create a heavier fog effect.
BG Opacity controls how transparent the card background is. Lower values (10–25%) give a light frosted look. Higher values make the card more opaque and less glassy.
Pick a BG Color — white works for light glass effects, dark colors for dark-mode variants. Border Opacity controls the translucent edge line. Border Radius rounds the card corners. Click Copy Code to paste directly into your CSS file.
Worked Examples
Light Glass Card
Blur: 12px, BG Opacity: 20%, BG Color: white, Border Opacity: 30%. The classic glassmorphism card — light, airy, works over any colorful gradient background.
Dark Glass Panel
Blur: 16px, BG Opacity: 15%, BG Color: #000000, Border Opacity: 20%. Used in dark-mode dashboards where panels need to float above a deep gradient or blurred image.
Subtle Frosted Input
Blur: 6px, BG Opacity: 30%, Border Opacity: 40%, Border Radius: 8px. A lower-intensity effect ideal for form inputs, nav bars, or tooltips that need legibility.
Frequently Asked Questions
What is glassmorphism in CSS?
Glassmorphism is a UI design style that simulates frosted glass using a semi-transparent background, backdrop-filter blur, a translucent border, and rounded corners. The effect makes elements appear to float above a colorful background.
What CSS properties create the glassmorphism effect?
The four core properties are: background: rgba() for transparency, backdrop-filter: blur() for the frosted blur, border: 1px solid rgba() for the glass edge, and border-radius for soft corners. An optional box-shadow adds depth.
Does backdrop-filter work in all browsers?
backdrop-filter is supported in Chrome, Edge, Safari, and modern Firefox (v70+). For Safari you may need the -webkit-backdrop-filter prefix. Always check caniuse.com for the current support table before shipping.
Why does glassmorphism need a colorful background?
The blur effect blurs whatever is behind the element. On a plain white or black background there is no color variation to blur, so the card just looks transparent rather than frosted. You need gradients, images, or colorful elements behind the glass card.
What blur value looks best for glassmorphism?
Most designs use blur values between 8px and 20px. Lower values (4–8px) give a subtle frosted look. Higher values (16–24px) create a heavier fog. Values above 30px often obscure the background too much and can hurt readability of card content.
How do I apply glassmorphism to a button?
Apply the same properties to a button: background: rgba(255,255,255,0.2), backdrop-filter: blur(8px), border: 1px solid rgba(255,255,255,0.3), border-radius: 8px. Ensure the button sits over a colorful parent background for the effect to be visible.