Generador de morfismo de vidrio CSS
Diseñe visualmente una superficie de vidrio esmerilado y copie el CSS. Ajuste el desenfoque, la opacidad del fondo, la opacidad del borde y el radio de las esquinas, observe la actualización de la vista previa en vivo y elimine un conjunto de reglas que puede pegar directamente en una hoja de estilo o componente.
Glass Card Preview
Frosted glass visual container with live CSS backdrop-filter.
Adjust Glass Parameters
/* Glassmorphism Effect */ background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
como funciona
- 1
Ajuste los controles deslizantes de desenfoque, opacidad del fondo, borde y radio de las esquinas.
- 2
Mire la vista previa en vivo para juzgar el efecto sobre un fondo real en lugar de en abstracto.
- 3
Ajuste hasta que la superficie siga siendo legible: los efectos del vidrio fallan cuando el contraste cae demasiado.
- 4
Copie el CSS generado y péguelo en su hoja de estilo o componente.
Ventajas y beneficios clave
Comentarios visuales en vivo
Cada control deslizante actualiza la vista previa inmediatamente, lo cual es más rápido que editar valores en una hoja de estilo y recargarlos.
CSS listo para copiar
La salida es CSS simple con filtro de fondo y las reglas de fondo y borde correspondientes; no se requiere marco.
El contraste permanece visible
Debido a que sintoniza una vista previa real, puede ver cuándo el texto sobre la superficie deja de ser legible.
Sin paso de construcción
Las reglas funcionan en una hoja de estilo simple, un módulo CSS, valores arbitrarios de Tailwind o un componente con estilo.
Para qué lo usa la gente
- Diseñar una tarjeta, modal o barra de navegación que flota sobre una foto o un degradado.
- Creación de un prototipo de un panel esmerilado antes de comprometerse con él en el sistema de diseño.
- Hacer coincidir una superficie de vidrio existente a simple vista cuando tiene la captura de pantalla pero no el CSS.
- Enseñar o documentar cómo se comporta el filtro de fondo con diferentes valores de desenfoque.
Formatos y opciones compatibles
| Salida | Declaraciones CSS: filtro de fondo, fondo, borde, radio de borde |
|---|---|
| Controles | Radio de desenfoque, opacidad del fondo, opacidad del borde, radio de las esquinas |
Privacidad y manejo de datos
Todo aquí es CSS generado en la página a partir de valores del control deslizante. No se carga nada y no se registra nada sobre su diseño.
Límites y cosas que debes saber
- El filtro de fondo es costoso de componer. Varias superficies grandes y borrosas en una página pueden afectar considerablemente el rendimiento del desplazamiento en dispositivos de gama baja.
- El efecto sólo se muestra sobre el contenido detrás de él. Sobre un fondo plano y sólido, una superficie de vidrio parece una caja tintada.
- La accesibilidad es su responsabilidad: verifique que el texto sobre la superficie aún cumpla con los requisitos de contraste con la parte más ocupada del fondo.
Solución de problemas
El desenfoque no aparece en el navegador.
El filtro de fondo necesita que el elemento se coloque sobre otro contenido y requiere un fondo que no sea completamente opaco. Algunos navegadores más antiguos también necesitan la propiedad con el prefijo -webkit-.
El texto sobre el panel es difícil de leer.
Aumente la opacidad del fondo u oscurezca el tinte. El desenfoque por sí solo no garantiza el contraste cuando el fondo es brillante y ajetreado.
Glassmorphism CSS Generator — Frosted Glass Effect Online
Design a frosted-glass panel visually and copy the CSS. This free glassmorphism generator gives you live control over blur, transparency, border and shadow, and outputs the backdrop-filter rules that produce the effect in real browsers.
- Live visual preview — drag blur, opacity and saturation and watch the panel update instantly against a real background instead of guessing at values.
- Production-ready backdrop-filter CSS — the generated rule includes the vendor-prefixed fallback needed for Safari, so the effect does not silently vanish on iOS.
- Border and shadow control — the subtle light border and soft shadow are what sell the glass effect — both are tunable and included in the output.
- Copy straight into your stylesheet — paste the block into a CSS file, a styled component or a Tailwind arbitrary-value utility.
- Free, instant, in-browser — no account, no export credits and nothing uploaded.
Sample your background colour first with the Color Picker, then compress the finished stylesheet with the CSS Minifier.
Preguntas frecuentes
Does the glass effect hurt performance?
It can. backdrop-filter forces the browser to re-composite what is behind the element, and several large blurred surfaces on one page can make scrolling stutter on low-end devices. Use it for a few key surfaces rather than everywhere.
Why does the blur not show up?
backdrop-filter only has an effect when there is content behind the element and the background is not fully opaque. Some older browsers also need the -webkit- prefixed property.
How do I keep text readable on glass?
Raise the background opacity or add a tint. Blur alone does not guarantee contrast, and a bright, busy backdrop will defeat it — check the text against the busiest part of the background.
¿Se admite el filtro de fondo en todos los navegadores?
¡Sí! Todos los navegadores modernos (Chrome, Safari, Firefox, Edge) admiten propiedades CSS de filtro de fondo.
¿El efecto cristal perjudica el rendimiento?
Puede. El filtro de fondo obliga al navegador a recomponer lo que hay detrás del elemento, y varias superficies grandes y borrosas en una página pueden hacer que el desplazamiento se interrumpa en dispositivos de gama baja. Úselo para algunas superficies clave en lugar de en todas partes.
¿Por qué no aparece el desenfoque?
El filtro de fondo solo tiene efecto cuando hay contenido detrás del elemento y el fondo no es completamente opaco. Algunos navegadores más antiguos también necesitan la propiedad con el prefijo -webkit-.
¿Cómo mantengo el texto legible en vidrio?
Aumente la opacidad del fondo o agregue un tinte. El desenfoque por sí solo no garantiza el contraste, y un fondo brillante y ocupado lo anulará; compare el texto con la parte más ocupada del fondo.
Herramientas relacionadas
Generador de códigos QR
Convierte cualquier enlace o texto en un código QR escaneable
Convertidor de casos de texto
Cambiar entre SUPERIOR, Inferior, Título y camelCase
Formateador JSON
Formatee, valide y minimice JSON al instante
Cronómetro y temporizador de cuenta regresiva
Cronómetro en línea a pantalla completa, registrador de vueltas y cuenta regresiva