Generador CSS Glassmorphism
Efecto de cristal esmerilado CSS con preview en vivo
Genera CSS glassmorphism — el efecto de cristal esmerilado — con previsualización en tiempo real. Controla blur, opacidad, saturación, borde y border-radius con sliders. Copia CSS listo para producción incluyendo prefijos -webkit-. Sin necesidad de librerías.
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;// guía rápida
El glassmorphism es una tendencia popular de diseño de interfaz caracterizada por una apariencia translúcida o de cristal esmerilado. Utiliza una combinación de opacidad de fondo, bordes sutiles, sombras y la propiedad CSS backdrop-filter para difuminar los elementos que están detrás del panel.
Cómo usar esta herramienta:
- Ajusta los controles deslizantes para cambiar la cantidad de Desenfoque (Blur), la Opacidad de fondo y la Saturación del color.
- Ajusta el radio del borde, el grosor del borde y la intensidad de la sombra.
- Observa cómo cambian los efectos en tiempo real sobre la imagen de fondo de muestra.
- Copia el código CSS generado, el cual incluye prefijos de proveedor Webkit para dar soporte a Safari.
// preguntas frecuentes
¿Qué es backdrop-filter en CSS?
La propiedad CSS <code>backdrop-filter</code> aplica efectos gráficos—como desenfoque o cambios de color—al área detrás de un elemento. A diferencia del <code>filter</code> estándar, que afecta al propio elemento, backdrop-filter difumina lo que está detrás del mismo.
¿Es compatible el glassmorphism con Safari?
Sí. Safari requiere el prefijo de proveedor <code>-webkit-backdrop-filter</code> para renderizar el efecto de desenfoque. El código generado por esta herramienta incluye este prefijo automáticamente.
¿Puede el glassmorphism causar problemas de rendimiento web?
Sí, el uso intensivo de efectos de desenfoque backdrop-filter puede consumir muchos recursos del navegador para renderizarse, especialmente en dispositivos móviles o GPUs lentas. Recomendamos usarlo selectivamente en cabeceras, tarjetas o modales.