Generador CSS Glassmorphism - Crea Efectos de Vidrio Esmerilado
Genera hermosos efectos CSS de vidrio esmerilado con vista previa en vivo. Personaliza desenfoque, transparencia, bordes y sombras.
Preguntas Frecuentes
¿Qué es el Glassmorphism?
El glassmorphism es una tendencia moderna de diseño UI que crea un efecto de vidrio esmerilado utilizando fondos translúcidos, desenfoque de fondo y bordes sutiles. Popularizado por macOS Big Sur de Apple y Fluent Design de Windows 11, otorga a los elementos una sensación de profundidad y capas al permitir que el contenido del fondo se vea a través con una apariencia suave y desenfocada. El efecto se logra principalmente mediante propiedades CSS como backdrop-filter, fondos semitransparentes y bordes finos claros.
¿Cómo uso este generador de Glassmorphism?
Ajusta el control deslizante de intensidad de desenfoque para controlar el efecto de vidrio esmerilado, luego establece el color de fondo y su opacidad usando el selector de color y el control deslizante. Activa o desactiva el borde y la sombra, y ajusta sus parámetros como grosor, color, opacidad y radio. La vista previa en vivo se actualiza en tiempo real para que puedas ver el resultado exacto. Una vez satisfecho, copia el código CSS generado directamente en tu hoja de estilos.
¿Están seguros mis datos? ¿Se envía algo a un servidor?
Sí, tus datos están completamente seguros. Esta herramienta se ejecuta 100% en tu navegador usando JavaScript del lado del cliente — ningún dato, configuración o ajuste de diseño se envía nunca a ningún servidor. Toda la generación de CSS, renderizado de vista previa y cálculos de color ocurren localmente en tu dispositivo, haciéndola segura para trabajo de diseño confidencial y proyectos de clientes.
¿Qué es backdrop-filter y cómo funciona?
La propiedad CSS backdrop-filter aplica efectos gráficos como desenfoque, brillo o contraste al área detrás de un elemento. A diferencia de la propiedad filter que afecta al elemento en sí, backdrop-filter solo afecta lo que es visible a través del fondo transparente o semitransparente del elemento. Para el glassmorphism, backdrop-filter: blur() es la propiedad clave que crea la apariencia de vidrio esmerilado al desenfocar el contenido debajo del panel.
¿Qué navegadores soportan glassmorphism / backdrop-filter?
La propiedad backdrop-filter es soportada por más del 95% de los navegadores a nivel global, incluyendo Chrome 76+, Firefox 103+, Safari 9+ y Edge 79+. Safari fue en realidad el primer navegador importante en implementarla con el prefijo -webkit-. Para máxima compatibilidad, se recomienda incluir tanto las declaraciones -webkit-backdrop-filter como backdrop-filter, lo cual este generador hace automáticamente.
¿Cómo afecta el glassmorphism al rendimiento?
El desenfoque con backdrop-filter activa la composición GPU, lo cual puede impactar el rendimiento si se usa en exceso. Cada elemento desenfocado crea una capa de composición separada que el navegador debe renderizar independientemente. Para mantener un rendimiento fluido, limita el número de elementos de vidrio visibles simultáneamente, usa valores moderados de desenfoque (8-20px), evita anidar elementos glassmórficos y asegúrate de que el área desenfocada no cubra porciones excesivamente grandes del viewport.
¿Cómo aseguro que el texto sea legible en un panel de vidrio?
Para cumplir con las pautas de accesibilidad WCAG, asegura suficiente contraste entre el texto y el fondo de vidrio. Aumenta la opacidad del fondo (0.3-0.5) para mejor contraste, usa un valor de desenfoque más alto para que el contenido subyacente sea menos distractor, y añade un borde sutil para definir los bordes del panel. Considera usar texto oscuro en paneles de vidrio claros y texto claro en paneles de vidrio oscuros, y siempre prueba la legibilidad contra varias imágenes y colores de fondo.
Ejemplos de Código
function hexToRgba(hex, opacity) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}
function generateGlassmorphismCSS(options = {}) {
const {
blur = 10,
bgColor = '#ffffff',
bgOpacity = 0.15,
borderEnabled = true,
borderWidth = 1,
borderColor = '#ffffff',
borderOpacity = 0.2,
borderRadius = 12,
shadowEnabled = true,
shadowX = 0,
shadowY = 4,
shadowBlur = 30,
shadowSpread = 0,
shadowColor = '#000000',
shadowOpacity = 0.1,
} = options;
const rules = [];
rules.push(`background: ${hexToRgba(bgColor, bgOpacity)};`);
rules.push(`-webkit-backdrop-filter: blur(${blur}px);`);
rules.push(`backdrop-filter: blur(${blur}px);`);
if (borderRadius > 0) {
rules.push(`border-radius: ${borderRadius}px;`);
}
if (borderEnabled && borderWidth > 0) {
rules.push(`border: ${borderWidth}px solid ${hexToRgba(borderColor, borderOpacity)};`);
}
if (shadowEnabled) {
rules.push(`box-shadow: ${shadowX}px ${shadowY}px ${shadowBlur}px ${shadowSpread}px ${hexToRgba(shadowColor, shadowOpacity)};`);
}
return rules.join('\n');
}
console.log(generateGlassmorphismCSS());
// background: rgba(255, 255, 255, 0.15);
// -webkit-backdrop-filter: blur(10px);
// backdrop-filter: blur(10px);
// border-radius: 12px;
// border: 1px solid rgba(255, 255, 255, 0.2);
// box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);