Generador de glassmorphism

Diseña un panel de cristal esmerilado ajustando desenfoque, saturación, tinte, borde, radio y sombra. Copia CSS o clases de Tailwind, o descarga un PNG de la vista previa. Puedes incluir una variante opaca del tinte elegido para los navegadores que indiquen una preferencia por reducir la transparencia.

Solo local

Ajustes predefinidos

Elige un preajuste para configurar todos los controles a la vez y ajusta después.

Desenfoque20pxSaturación180%Mantén el desenfoque por debajo de unos 20 px. Más allá de eso el navegador vuelve a desenfocar una copia de la página en cada fotograma de desplazamiento, y ahí es donde una cabecera esmerilada pierde fluidez en un móvil de gama media.Opacidad del tinte0.12

Color del tinte

Borde1px

Brillo del borde

Intensidad del brillo0.25Radio24pxSombra28Alternativa para transparencia reducidaUsa el tinte elegido sin transparencia si el navegador comunica esa preferencia. La compatibilidad varía según el navegador y el sistema.

CSS

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

backdrop-filter desenfoca lo que se pinta detrás del elemento: la página, una imagen u otro componente. Coloca una capa sólida o degradada detrás del cristal en la vista previa para ver el resultado real.

Clases de Tailwind

rounded-[24px] border-[1px] border-[color:rgb(255_255_255_/_0.25)] bg-[rgb(255_255_255_/_0.12)] backdrop-blur-[20px] backdrop-saturate-[1.80] shadow-[0_8px_32px_rgb(0_0_0_/_0.28)] bg-clip-padding [@media(prefers-reduced-transparency:reduce)]:bg-[rgb(255_255_255_/_1)] [@media(prefers-reduced-transparency:reduce)]:[backdrop-filter:none] [@media(prefers-reduced-transparency:reduce)]:[-webkit-backdrop-filter:none]

La exportación incluye backdrop-filter con y sin prefijo para admitir navegadores antiguos.

¿Cómo funciona Generador de glassmorphism?

`backdrop-filter` desenfoca y modifica la saturación de lo que se ve detrás del panel. Un color translúcido aporta el tinte, mientras que un borde claro dibuja el contorno. El aspecto final depende tanto de estos ajustes como del fondo de tu página.

El CSS incluye `backdrop-filter` y `-webkit-backdrop-filter` para compatibilidad con navegadores anteriores. `background-clip: padding-box` mantiene el tinte dentro del borde. El soporte de los filtros y de las consultas de preferencias varía según el navegador.

La vista previa utiliza un fondo propio y filtros SVG con los mismos valores de desenfoque, saturación y opacidad. El PNG se genera a partir de ese SVG. En tu página, el CSS filtrará el contenido real situado detrás del panel.

Si activas la alternativa de transparencia reducida, la exportación utiliza el tinte seleccionado sin transparencia y desactiva ambos filtros dentro de `prefers-reduced-transparency`. La preferencia depende del navegador y del sistema operativo. Comprueba el contraste del texto con ambas variantes y prueba el rendimiento de los paneles grandes.

Ajustes del panel

Desenfoque 20px
Saturación 180%
Color del tinte #ffffff
Opacidad del tinte 0.12
Radio 24px

CSS generado

.glass {
  border-radius: 24px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background-color: rgb(255 255 255 / 0.12);
  background-clip: padding-box;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

¿Qué opciones y casos límite admite Generador de glassmorphism?

Referencia técnica y opciones
Parámetro	Tipo	Valor predeterminado	Comportamiento y casos límite
blur(Xpx)	longitud	20px	Controla el desenfoque del fondo. La vista previa SVG usa el mismo valor como desviación estándar del filtro gaussiano.
saturate(X%)	porcentaje	180%	Modifica la saturación del fondo; 100% conserva su saturación original.
background-color	rgb con alfa	blanco al 12%	Define el tinte translúcido que se superpone al fondo filtrado.
border	grosor y color	1px, blanco al 25%	Añade un borde luminoso con grosor, color y opacidad ajustables.
background-clip	padding-box	activado	Evita que el tinte de fondo se pinte debajo del borde.
Prefijo -webkit-	declaración adicional	activado	Incluye la propiedad con prefijo junto a la propiedad estándar para compatibilidad con navegadores anteriores.
prefers-reduced-transparency	consulta de medios	activado	Utiliza el tinte elegido como fondo opaco y desactiva el filtro cuando el navegador comunica esta preferencia.

Preguntas frecuentes

¿Cómo hago un efecto de cristal esmerilado en CSS?

Combina un fondo translúcido, `backdrop-filter: blur(20px) saturate(180%)` y un borde claro. El generador incluye también `-webkit-backdrop-filter` y `background-clip: padding-box`. Ajusta el tinte y la opacidad para que el texto siga siendo legible.

¿Por qué no se aprecia el desenfoque?

Comprueba que haya contenido o variaciones de color detrás del panel y que el fondo del panel no sea opaco. Revisa también la compatibilidad del navegador y si algún elemento antecesor limita el área que puede filtrarse.

¿Afecta al rendimiento?

Puede aumentar el coste de renderizado, especialmente en paneles grandes sobre contenido que se mueve. Prueba tu diseño en los dispositivos de destino y reduce el desenfoque o el área del panel si la interacción pierde fluidez.

¿Para qué sirve `prefers-reduced-transparency`?

Cuando activas esta opción, el CSS y las clases de Tailwind usan una versión opaca del tinte seleccionado y desactivan el filtro si el navegador comunica esa preferencia. El soporte varía según el navegador y el sistema operativo. Comprueba el contraste también con el fondo opaco.

¿La vista previa reproduce el CSS que copio?

Reproduce los mismos ajustes sobre un fondo de ejemplo mediante filtros SVG, y ese SVG se utiliza para crear el PNG. El CSS aplica el efecto al fondo real de tu página, por lo que el aspecto puede cambiar si ese fondo es diferente.

¿Por qué el panel parece gris o pierde el contraste?

Un tinte neutro o muy transparente sobre un fondo uniforme puede hacer que el efecto sea poco visible. Prueba otro tinte, aumenta su opacidad o cambia el fondo. Revisa la legibilidad del texto: el desenfoque por sí solo no garantiza un contraste suficiente.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas