Ir a la herramienta
JoeLucky

Haz clic en ★ para guardar una herramienta

Categorías de herramientas

Código a imagenGenerador de degradados CSSGlassmorphism CSSGenerador de box-shadowGenerador de loaders CSSGenerador de blobs SVGSVG a PNGVerificador de contraste de colorConversor PX / REM / EM
JoeLucky

Herramientas en línea prácticas, todas en un solo lugar

Política de privacidadTérminos del servicio

© 2026 JoeLucky®. Todos los derechos reservados.

  1. JoeLucky
  2. /CSS y diseño
  3. /Glassmorphism CSS

Glassmorphism CSS

Genera en directo el código de desenfoque de fondo y borde translúcido.

CSS Y DISEÑO SIMILARES

Ver todas
Código a imagen

Convierte fragmentos de código en capturas de pantalla atractivas.

Abrir →
Generador de degradados CSS

Diseña degradados lineales, radiales y cónicos y copia el CSS al instante.

Abrir →
Generador de box-shadow

💬 Comentarios

?

Aún no hay comentarios. ¡Sé el primero!

¿QUÉ ES Glassmorphism CSS?

Ajusta opacidad, desenfoque, saturación y borde para previsualizar en tiempo real una tarjeta de cristal esmerilado y luego copia el CSS, incluido backdrop-filter.

¿Cómo se usa?

  1. El panel izquierdo tiene 7 controles: opacidad, desenfoque, saturación, opacidad del borde, radio del borde, sombra y selector de color — todos actualizan al instante la tarjeta de vista previa.
  2. Mejores resultados: opacidad del 10–25 % y desenfoque de 5–15 px. Estos dos parámetros son los que más influyen en el aspecto de cristal esmerilado.
  3. Sube la saturación al 180 % para colores vivos detrás del cristal; la opacidad del borde añade un sutil borde de realce a la tarjeta.
  4. Haz clic en las 6 muestras de fondo (Púrpura, Océano, Atardecer, etc.) para probar el efecto de cristal sobre distintos degradados.
  5. Haz clic en «Copiar CSS» para obtener código listo para producción que incluye backdrop-filter y -webkit-backdrop-filter (compatible con Safari).

Preguntas frecuentes

¿Cómo se logra el efecto glassmorphism?

Con backdrop-filter: blur() para desenfocar el fondo, un background-color semitransparente y un borde sutil.

¿Es compatible con todos los navegadores?

Funciona bien en Chrome, Edge y Safari. Firefox necesita un indicador experimental. Añade el prefijo -webkit- por seguridad.

¿Puedo previsualizarlo en tiempo real?

Sí. Cualquier ajuste de un control deslizante o de un color actualiza la vista previa al instante.

Ajustes del efecto

#FFFFFF
Opacidad del fondo15%
Desenfoque del fondo10px
Saturación180%
Opacidad del borde30%
Radio del borde16px
Opacidad de la sombra10%
Fondo de la vista previa
Vista previa en vivo
CSS
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 Consejos

  • Mejores resultados: opacidad 10–25 %, desenfoque 5–15 px
  • Se incluye el prefijo -webkit-backdrop-filter para la compatibilidad con Safari
  • Si el efecto se ve apagado, asegúrate de que el elemento padre tenga un fondo colorido
  • Una saturación del 180 % mantiene vivos los colores detrás del vidrio

Crea sombras suaves y en capas con vista previa interactiva.

Abrir →