Diseño / CSS

Generador de CSS Glassmorphism (efecto de vidrio esmerilado)

Crea el efecto de vidrio esmerilado con CSS backdrop-filter: ajusta el desenfoque, el tono, la opacidad, la saturación, el borde y el radio de las esquinas sobre una previsualización colorida, y copia CSS compatible con todos los navegadores actuales.

Generador de CSS Glassmorphism (efecto de vidrio esmerilado): backdrop-filter: blur() desenfoca lo que hay detrás del elemento, y saturate() hace que esos colores sean más intensos. Un fondo semitransparente da tono al vidrio, y un borde claro y sutil resalta el contorno, como en el vidrio real. La línea con el prefijo -webkit- es compatible con Safari anterior a la versión 18. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría
Herramientas de desarrollo
Se ejecuta
En tu navegador
Coste
Gratis · sin registro
Disponibilidad
Lista para usar
Generador de glassmorphismProcesamiento local

Funciona por completo en tu navegador

Vidrio esmeriladoLos colores situados detrás de esta tarjeta están desenfocados.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

El efecto necesita algo colorido detrás del elemento: backdrop-filter desenfoca lo que hay debajo y el fondo semitransparente permite que se vea. La línea -webkit- es para Safari anterior a la versión 18. Comprueba que el texto sobre el vidrio mantenga suficiente contraste en todas las partes del fondo.

Accesibilidad

Algunas personas activan la transparencia reducida en la configuración de su sistema. La consulta de medios prefers-reduced-transparency, compatible con los navegadores basados en Chromium, puede sustituir el vidrio por un fondo sólido para ellas.

Combinar con una sombra

Una sombra suave y amplia separa la tarjeta del fondo; ajústala con el generador de sombras de caja y sustituye la línea box-shadow.

Cómo se usa

  1. Configura el desenfoque, la opacidad y la saturación.
  2. Elige el tono, el borde y el radio de las esquinas.
  3. Copia el CSS y coloca el elemento sobre un fondo colorido.

Privacidad y límites

Todo se ejecuta en tu navegador.

Herramientas relacionadas

Sombra de cajaGradiente CSSpatrón CSS

Preguntas frecuentes

¿Por qué mi vidrio se ve demasiado simple?

Debe haber algo colorido o detallado detrás; sobre un color uniforme, el desenfoque no tiene nada que desenfocar.

¿backdrop-filter es lento?

Consume más recursos que la mayoría del CSS, especialmente cuando áreas grandes se desplazan sobre contenido en movimiento; mantén pequeñas las áreas desenfocadas y evita apilar muchas.

¿El texto se puede leer bien?

Compruébalo: el contraste cambia según el fondo. Un tono más oscuro, una mayor opacidad o una sombra de texto pueden ayudar.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta