Generador CSS Glassmorphism - Constructor de Efecto Vidrio Esmerilado

Cree efectos CSS de vidrio esmerilado con vista previa en vivo

Herramientas CSS

Tool

Glass Settings

blur (10px)transparency (0.2)border opacity (0.3)border-radius (16px)

Glass Card

Frosted glass effect

CSS

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Cómo usar

1Ajuste la intensidad del desenfoque para el efecto de vidrio esmerilado
2Configure la transparencia del fondo
3Controle la opacidad del borde para el borde del vidrio
4Establezca el radio de borde y copie el CSS

Preguntas frecuentes

Glassmorphism es una tendencia de diseño que utiliza elementos con estilo de vidrio esmerilado — fondos semitransparentes combinados con desenfoque y bordes sutiles para crear un efecto de profundidad en capas.

backdrop-filter es compatible con todos los navegadores modernos. El prefijo -webkit-backdrop-filter aún es necesario para versiones antiguas de Safari.