What is glassmorphism?

Glassmorphism is a UI design trend that uses frosted-glass style panels — translucent backgrounds with a blur effect, subtle border, and soft shadow — to create depth and layering over colourful backgrounds.

Which browsers support backdrop-filter?

backdrop-filter is supported in Chrome 76+, Edge 79+, Safari 9+ (with -webkit- prefix), and Firefox 70+. For maximum compatibility the generator outputs both the -webkit-backdrop-filter and standard backdrop-filter properties.

Why doesn't the glass effect show on a white background?

Glassmorphism requires a colourful or image background behind the element for the blur and transparency to be visible. On a white or single-colour background the effect is nearly invisible. Use the gradient presets to see the true result.

How do I adjust the glass colour tint?

The background opacity slider controls how much white (or a chosen colour) is mixed into the glass. Low opacity gives a very transparent look; higher opacity adds more tint. You can also tweak the generated background: rgba() value directly in your stylesheet.

Design Gratis Sin registro

CSS Glass Generator

Generate CSS glassmorphism effects with live preview and code export

Cargando la herramienta…

Acerca de esta herramienta

Design stunning glassmorphism UI cards entirely in CSS. Adjust backdrop blur, background opacity, border opacity, border radius, and shadow strength using intuitive sliders. Choose from three gradient background presets — purple-blue, sunset orange-pink, and ocean teal-green — to see exactly how your glass effect looks against colourful content. The live preview shows a realistic glass card floating over the chosen background. Copy the generated CSS including backdrop-filter, background, border, border-radius, and box-shadow with one click.

Cómo usar

1 Choose a background scene preset (purple-blue, sunset, or ocean) from the selector.
2 Drag the Blur slider to set the backdrop-filter blur amount (0–40px).
3 Adjust Background Opacity to control how translucent the panel is.
4 Set Border Opacity for the glass edge highlight.
5 Change Border Radius to round the corners.
6 Increase Shadow Strength to add depth with a soft box-shadow.
7 Click 'Copy CSS' to copy the generated CSS to your clipboard.

Preguntas frecuentes

Herramientas relacionadas

CSS Neon Glow Generator

Generate animated CSS neon glow text effects with live preview

Generador de códigos QR

Construya visualmente valores de box-shadow de CSS con vista previa en vivo — admite múltiples capas.

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.