background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);El generador de vidrio CSS es un editor visual para el estilo de interfaz de usuario de vidrio esmerilado, donde una superficie translúcida desenfoca lo que sea que se sienta detrás de él. Ajusta el desenfoque del fondo, la transparencia de llenado, la saturación, el color del tinte y el radio de la esquina con los controles deslizantes, mira una actualización de vista previa sobre un fondo colorido y copia el CSS exacto que produce.
Glassmorfismo se basa en la propiedad de filtro de fondo, que aplica un desenfoque al contenido detrás de un elemento en lugar del propio elemento. Combinado con un fondo semitransparente, un borde de línea del cabello y una suave sombra, produce el aspecto de vidrio en capas popularizado por los sistemas operativos modernos. Obtener el equilibrio a mano es complicado, por lo que esta herramienta administra cada valor y genera un bloque limpio y copiable.
Todo se ejecuta en su navegador. Elija un ajuste preestablecido como Frosted, Dark o Vibrant, ajuste los controles deslizantes y copie el CSS, incluido el filtro de fondo con prefijo -Webkit- para un soporte más amplio. Sin cuenta, sin cargas, y sigue funcionando sin conexión una vez que la página se ha cargado.
Comience desde Frosted, Light, Dark, Vibrant o Sutil para obtener un aspecto de vidrio equilibrado, luego refinelo para que coincida con su diseño.
Arrastre los controles deslizantes de Desenfoque de fondo, transparencia y saturación, elija un color de tinte y configure el radio de esquina. Las actualizaciones de vista previa en vivo sobre un fondo colorido para que el desenfoque sea visible.
Encienda o apague el borde de la línea del cabello. Un sutil borde translúcido-blanco 1 px vende el borde de cristal, especialmente en fondos más oscuros.
Copie el bloque generado — fondo, filtro de fondo (con -webkit- prefix), border-radius, bordar y shadow, y péguelo en su tarjeta o panel.
Un deslizador de desenfoque dedicado impulsa el filtro de fondo, que congela lo que se sienta detrás del elemento: el núcleo del efecto de vidrio
La transparencia, la saturación, el color del tinte, el radio de la esquina y un borde de línea del cabello opcional le permiten marcar el aspecto de vidrio exacto
La vista previa se encuentra sobre un degradado colorido para que pueda ver el desenfoque de fondo funcionando, actualizándose al instante mientras edita
La salida incluye tanto el filtro de fondo como el prefijo de filtro de fondo y el prefijo de filtro de fondo, por lo que el efecto funciona en Safari y otros navegadores WebKit.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
0 comments
No comments yet. Be the first to share your thoughts!