CSS Glassmorphism Generator
Generate frosted-glass glassmorphism CSS with adjustable blur, tint, border, and radius, plus a live preview.
Blur: 10px
Tint Opacity: 0.25
Border Opacity: 0.30
Border Radius: 16px
Live Preview
Frosted Glass
CSS:
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
How to Use the CSS Glassmorphism Generator
Glassmorphism is the frosted-glass look popular in modern UI design, made by blurring whatever sits behind an element and layering a semi-transparent tint and border over it. Adjust the blur amount, tint color and opacity, border opacity, and corner radius using the sliders, watch the live preview update over a colorful background, then copy the generated CSS straight into your stylesheet.
Example
A blur of 10px with a white tint at 25% opacity and a 1px semi-transparent white border produces a classic frosted-glass card effect that lets background colors show through softly.
Common Use Cases
- Designing frosted-glass navigation bars, cards, or modal overlays.
- Building macOS- or iOS-style translucent UI panels for a web app.
- Prototyping a glassmorphic design system component before writing production CSS by hand.
FAQs
- Why does the CSS include both backdrop-filter and -webkit-backdrop-filter? The
-webkit-prefixed version is required for Safari to apply the blur effect, so including both ensures the glass effect renders consistently across Chrome, Firefox, and Safari. - Why isn't the blur showing on my element?
backdrop-filteronly blurs whatever is visually behind the element, so it needs a background (an image, gradient, or other content) positioned underneath it — over a plain solid-color background, the effect can look identical to a simple semi-transparent box. - Does glassmorphism work well for text-heavy content? Use it sparingly for text-heavy areas — the translucent background can reduce contrast, so it's best paired with a subtle background and dark or light text chosen to keep good readability.