Cómo crear un efecto glassmorphism en CSS
Publicado el 15 de septiembre de 2026 · 2 min de lectura
El aspecto de "glassmorphism" de vidrio esmerilado — un panel translúcido y desenfocado flotando sobre un fondo colorido — se reduce a una combinación específica de opacidad de fondo, desenfoque backdrop-filter, y un borde sutil. Esta herramienta te permite ajustar los tres con una vista previa en vivo.
Probar Generador de GlassmorphismPasos
- 1
Abre el Generador de Glassmorphism
Ve al generador de glassmorphism.
- 2
Ajusta el tinte y la opacidad
Elige el color base del panel de vidrio y cuán transparente debe ser.
- 3
Ajusta el desenfoque y la saturación
Ajusta la intensidad del desenfoque de fondo y un impulso de saturación para ese aspecto vívido de vidrio esmerilado.
- 4
Copia el CSS
Pega las reglas generadas de background, backdrop-filter y border en tu hoja de estilos.
Preguntas frecuentes
El desenfoque de fondo solo tiene un efecto visible cuando hay algo detrás del elemento para desenfocar — un fondo sólido plano no mostrará el efecto de vidrio, así que la vista previa en vivo usa un gradiente colorido para demostrarlo adecuadamente.
Está soportado en todos los navegadores modernos; versiones muy antiguas de navegador podrían no renderizar el desenfoque, aunque el fondo semitransparente por sí solo todavía proporciona un aspecto de respaldo razonable.
Sí — la opacidad del borde es ajustable junto al desenfoque, tinte y saturación, ya que un borde de luz sutil es parte de lo que vende el aspecto de vidrio.
Como la vista previa renderiza el CSS real en vivo, puedes ajustar finamente el efecto hasta que se vea bien antes de copiar una sola línea de código.