CSS Glassmorphism Generator (with Backdrop Blur)

Diseñá cards CSS de frosted-glass con preview en vivo y código copy-ready

🔒 100% en el browser🆓 Gratis para siempre⚡ Sin sign-up
Nota: La interfaz de la herramienta de abajo por ahora solo está en inglés. Estamos traduciéndolas una a una. Ver esta herramienta en inglés →
Glass card
Frosted, saturated, alive
CSS
.glass {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
Tailwind classes (closest match)
bg-white/25 backdrop-blur-xl backdrop-saturate-150 border border-white/35 rounded-2xl shadow-xl

Cómo funciona

  1. 1
    Pick un background

    Elegí un gradient preset o soltá tu propia imagen - el glass va arriba.

  2. 2
    Tuneá los sliders

    Blur, saturation, alpha del background, border, radius, shadow - el preview updatea al instante.

  3. 3
    Copy el CSS

    Pegalo en tu stylesheet o en Tailwind arbitrary-values ([backdrop-filter:blur(20px)]).

Sobre CSS Glassmorphism Generator (with Backdrop Blur)

CSS glassmorphism generator gratis. Diseñá frosted-glass cards con sliders en vivo para blur, saturation, transparencia de background, border y shadow - sobre tu propia imagen de background o un preset. Copiá CSS production-ready con vendor prefixes. CSS Glassmorphism Generator (with Backdrop Blur) en 712 Tools corre entero dentro de tu browser con APIs nativas de JavaScript - ningún server ve tus datos. Eso significa resultados al instante, privacidad total y sin límites de upload.

Ya sea para una sesión de debug, una comprobación rápida o un incidente en producción, esta herramienta es gratis y sin límite de usos. Sin watermarks, sin sign-up y sin ads dentro de la herramienta.

Preguntas frecuentes

¿Todos los browsers soportan backdrop-filter?

Sí en Chromium, Safari y Firefox moderno. Firefox viejo necesita un fallback background color - el CSS generado lo incluye.

¿Por qué mi glass se ve sólido?

backdrop-filter solo funciona cuando el elemento tiene background translúcido. Mantené el alpha del background debajo de 1 y asegurate que haya contenido real detrás.

¿Funciona en Tailwind?

Sí - Tailwind trae utilities backdrop-blur-*. El generator muestra tanto CSS raw como la combo Tailwind más cercana.

Leer más

5 min de lectura

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

5 min de lectura

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

Herramientas relacionadas

Color Converter

Convierte entre HEX, RGB, HSL y CMYK con preview en vivo

Palette Generator

Genera paletas de color armoniosas desde un color base

CSS Gradient

Diseña gradients CSS linear, radial y conic con preview en vivo

Box Shadow

Diseña box-shadows CSS multi-layer con preview en vivo

Contrast Checker

Chequeá contraste texto/background contra WCAG 2.1 AA y AAA - preview en vivo

Physics Editor

Editor de hitbox de sprites gratis online - auto-traceá collision polygons y exportá para Phaser, Matter.js, Rapier o cualquier engine 2D