🪟 Generador CSS Vidrio Esmerilado — Constructor Glassmorphism

Create CSS frosted glass / glassmorphism effects with live preview. Adjust blur, transparency, border opacity. Copy backdrop-filter CSS instantly.

The frosted glass effect (glassmorphism) uses backdrop-filter: blur() to blur content behind a semi-transparent element. Use the sliders to tune blur, opacity, border, and saturation — then copy the complete CSS block for your project.

Tint Color

Blur: 12px

BG Opacity: 15%

Border Opacity: 30%

Border Radius: 16px

Saturation: 180%

Glass Card

Glassmorphism effect preview

Generated CSS

How to Use

Adjust the controls

Use the sliders to set blur, background opacity, border opacity, radius, and saturation. Pick a tint color with the color swatch.

See the live preview

The glass card updates instantly. Experiment with values to achieve the look you want.

Copy the CSS

Click Copy CSS to copy the generated code to your clipboard. Paste it into your stylesheet.

Frequently Asked Questions

What is glassmorphism? +

Glassmorphism is a UI design trend that mimics frosted glass — featuring blur, transparency, subtle borders, and shadows to create a layered depth effect. It became popular with iOS and macOS Big Sur designs.

What CSS properties create a glass effect? +

The key property is backdrop-filter: blur() which blurs the content behind the element. Combined with a semi-transparent background (rgba with low alpha), a thin border (rgba white), and box-shadow, you get the glassmorphism look.

Does backdrop-filter work in all browsers? +

backdrop-filter is supported in Chrome, Edge, Safari, and Firefox (since version 103). Add -webkit-backdrop-filter for Safari compatibility. Internet Explorer does not support it.

How do I add a glassmorphism card to my website? +

Copy the generated CSS and apply it to your element. Make sure the element has colorful content behind it — glassmorphism requires visible background content for the blur effect to look good.

What is the best blur value for glassmorphism? +

A blur of 10–16px is typically the sweet spot. Too little (under 5px) and the effect is barely visible. Too much (over 24px) and the background is unrecognizable. Pair with 15–25% opacity for best results.

Guía: Generador de Glassmorphism CSS

¿Qué es?

Glassmorphism simula vidrio esmerilado: fondo translúcido con desenfoque (backdrop-filter: blur()), borde sutil y sombra suave. Popularizado por macOS Big Sur, crea jerarquía visual manteniendo visibilidad del contenido detrás.

Cómo usar

Ajusta la opacidad y radio de desenfoque.
Configura el borde y esquinas.
Copia el CSS generado.

Consejos

Añade prefijo -webkit-backdrop-filter para Safari.
Solo visible sobre fondos con imágenes o gradientes, no sólidos.
Desenfoque excesivo degrada el rendimiento en móviles — usa 8-20px.