Generador de Glassmorphism CSS — Efecto Vidrio Esmerilado
Cree el efecto vidrio esmerilado (glassmorphism) con backdrop-filter. Ajuste desenfoque, transparencia, saturación, borde y radio, previsualice en vivo y copie el CSS.
Generador de Glassmorphism CSS — Diseñe el Efecto Vidrio Esmerilado
Cree hermosos efectos de interfaz glassmorphism (vidrio esmerilado) con un editor visual en vivo. Ajuste el desenfoque, la transparencia, la saturación, el borde y el radio de las esquinas, observe el resultado actualizarse al instante sobre un fondo colorido, y copie el CSS listo para usar. El aspecto de vidrio esmerilado popularizado por iOS, macOS Big Sur y Windows 11 está ahora a un clic.
¿Qué es el glassmorphism?
El glassmorphism es un estilo de diseño donde los elementos de interfaz parecen vidrio esmerilado: un fondo semitransparente con un desenfoque aplicado a lo que hay detrás, un borde claro sutil y una sombra suave. La propiedad CSS clave es backdrop-filter: blur(), que desenfoca el contenido detrás del elemento en lugar del elemento mismo.
Los controles
- Desenfoque: qué tan intensamente se desenfoca el fondo detrás de la tarjeta (el núcleo del efecto)
- Transparencia: la opacidad del tinte del vidrio — más baja deja pasar más fondo
- Saturación: potencia los colores detrás del vidrio para un aspecto más rico
- Radio de borde: redondea las esquinas de la tarjeta
- Grosor de borde: un borde claro fino añade el borde de vidrio realista
- Tinte + modo oscuro: desplace el vidrio hacia un color, o cambie a una variante de vidrio oscuro
Importante: soporte de backdrop-filter
- El efecto depende de
backdrop-filter, soportado en todos los navegadores modernos - El generador incluye el prefijo
-webkit-backdrop-filterpara Safari - El elemento debe estar sobre algún contenido o fondo — no hay nada que desenfocar en una página blanca
- Evite el sobre-desenfoque; 8 a 16px suele verse mejor
Consejos de diseño
- El glassmorphism brilla sobre degradados coloridos o fotos — pruebe los fondos predefinidos
- Mantenga el texto con alto contraste para que siga siendo legible sobre el desenfoque
- Úselo con moderación para tarjetas, barras de navegación o modales — no páginas enteras
Privacidad
Esta herramienta funciona completamente en su navegador. Nada se sube ni se almacena.