Generador de Glassmorphism
El generador de glassmorphism crea el efecto de cristal esmerilado con CSS backdrop-filter y te permite ajustar el desenfoque, la opacidad del fondo, la saturación, la opacidad del borde, el radio y el color del tinte con vista previa en vivo.
Acerca de esta herramienta
El generador de glassmorphism crea el efecto de cristal esmerilado con CSS backdrop-filter y te permite ajustar el desenfoque, la opacidad del fondo, la saturación, la opacidad del borde, el radio y el color del tinte con vista previa en vivo.
Cómo se usa
- Elige el color del tinte del cristal.
- Ajusta el desenfoque, la opacidad y la saturación.
- Define la opacidad del borde y el border-radius.
- Haz clic en Copiar CSS.
Datos útiles
- El efecto usa backdrop-filter: blur() saturate(), que desenfoca todo lo que hay detrás del elemento.
- Hace falta un fondo semitransparente (rgba); de lo contrario, el desenfoque queda oculto.
- El CSS generado incluye el prefijo -webkit-backdrop-filter para Safari.
- El efecto cristal luce mejor sobre fondos coloridos o con imágenes; sobre colores planos el desenfoque no se aprecia.
- Vigila el contraste del texto: los paneles translúcidos pueden quedar por debajo del contraste WCAG sobre fondos recargados.
Funciona por completo en tu navegador: nada de lo que introduces se sube ni se guarda.
Preguntas frecuentes
¿Cómo hago un efecto cristal en CSS?
Dale al elemento un fondo semitransparente, como rgba(255,255,255,0.15), y backdrop-filter: blur(12px); esta herramienta escribe la regla completa.
¿Por qué no funciona mi backdrop-filter?
El elemento necesita un fondo transparente o semitransparente, y debe haber algo detrás que desenfocar. Safari además necesita el prefijo -webkit-.
¿El glassmorphism es accesible?
Puede serlo si el texto mantiene suficiente contraste. Prueba los colores del texto sobre la parte más recargada del fondo.
¿backdrop-filter afecta al rendimiento?
El desenfoque exige mucho a la GPU, así que evita aplicarlo a áreas muy grandes o a muchos elementos a la vez, sobre todo en móviles de gama baja.