Generador CSS Glassmorphism

Ajusta el desenfoque, transparencia, tinte, borde, radio de esquina y saturación, observa cómo se actualiza la tarjeta de vidrio esmerilado en vivo sobre un fondo colorido y luego copia el CSS. Nada se sube.

Vidrio esmerilado Vista previa

Fondo

Desenfoque12px

Transparencia15%

Saturación180%

Color de tinte

Borde

Visibilidad del borde40%

Radio de esquina20px

Profundidad de sombra30

Todo funciona en tu navegador. Sin subidas, sin registro.

Cómo funciona

STEP 1

Mueve los controles

Configura el desenfoque, transparencia, color de tinte, borde, radio de esquina y saturación. La tarjeta de vidrio se actualiza en vivo mientras arrastras.

STEP 2

Elige un fondo

Cambia el gradiente detrás de la tarjeta para evaluar el efecto de vidrio esmerilado en fondos claros, oscuros y vivos.

STEP 3

Copia el CSS

Copia el CSS listo para usar con backdrop-filter, o descarga un archivo .css. Todo se genera en tu dispositivo.