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);¿Qué es el generador de vidrio morfismo CSS?
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 tu 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 obtener un soporte más amplio. Sin cuenta, sin cargas y sigue funcionando sin conexión una vez que se ha cargado la página.
El efecto depende de dos propiedades que funcionan juntas y falla silenciosamente si falta alguna de ellas. El filtro de fondo difumina todo lo que se encuentra detrás del elemento, por lo que necesita un color de fondo parcialmente transparente para mostrarlo: con total opacidad no hay nada que ver y sin ningún fondo la superficie desaparece. También necesita algo detrás que valga la pena difuminar, razón por la cual el efecto parece un panel plano sobre un fondo simple y cobra vida sobre una fotografía. Dos costos prácticos. El desenfoque de fondo es una de las cosas más caras de componer, particularmente en un área grande o durante el desplazamiento. Y el texto en una superficie translúcida tiene una relación de contraste que cambia con lo que pasa por debajo, por lo que puede pasar una verificación de contraste contra un fondo y fallar contra otro.
¿Cómo usar el generador de vidrio de CSS?
Elige un preset
Comience desde Frosted, Light, Dark, Vibrant o Sutil para obtener un aspecto de vidrio equilibrado, luego refinelo para que coincida con su diseño.
Afina el vaso
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.
alternar la frontera
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.
Copiar el CSS
Copie el bloque generado (fondo, filtro de fondo (con prefijo -webkit), radio de borde, borde y sombra) y péguelo en su tarjeta o panel.
Características clave
Control de desenfoque de fondo
Un control deslizante de desenfoque dedicado impulsa el filtro de fondo, que congela todo lo que se encuentra detrás del elemento, el núcleo del efecto de vidrio
Estilo de superficie completa
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
Vista previa en vivo
La vista previa se encuentra sobre un degradado colorido para que pueda ver el desenfoque de fondo funcionando, actualizándose al instante mientras edita
Salida prefijada
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.
Frequently Asked Questions
Related Tools
CSS Filter Generator
Apply blur, brightness, contrast, grayscale, sepia, hue-rotate and more with live sliders and a preview, then copy production-ready CSS filter code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
CSS Neumorphism Generator
Create soft-UI (neumorphic) elements with a live preview and controls for distance, blur, intensity, radius, surface color, and flat/concave/convex/pressed shapes - then copy the CSS.
CSS Text Shadow Generator
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity - build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
Comments
0 comments
No comments yet. Be the first to share your thoughts!