Herramientas de diseño

Generador de glassmorphism — backdrop-filter CSS

Ajusta visualmente el desenfoque, la opacidad, el color de fondo y la opacidad del borde para generar CSS de cristal esmerilado con prefijo -webkit. Útil para tarjetas, barras de navegación y capas de modal.

Cambio rápido→Generador de box-shadow CSS

CSSGlassmorphismbackdrop-filter

Cambio rápido:Generador de box-shadow CSS Generador de degradados CSS Glassmorphism CSS

Añadir esta herramienta a favoritos

No se ha seleccionado un modo de almacenamiento de favoritos.

Acciones rápidas

Volver a Herramientas de diseño Explorar todas las herramientas

Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.

Casos de uso

Añade un panel translúcido desenfocado a una tarjeta
Depura el apilado de capas glass en barras de navegación
Exporta CSS de backdrop-filter listo para pegar

Cómo usar

Ajusta el desenfoque, la opacidad, el color de fondo y la opacidad del borde
Revisa la vista previa
Copia o exporta el CSS generado

Entrada y salida de ejemplo

Parámetros

Blur 12px, opacity 0.15, background #ffffff

CSS

backdrop-filter: blur(12px); background: rgba(255,255,255,0.15);

FAQ

¿Qué hay de la compatibilidad con navegadores?

Se requiere compatibilidad con backdrop-filter. La herramienta genera tanto la propiedad estándar como -webkit-backdrop-filter.

¿En qué se diferencia de css-glassmorphism?

Esta herramienta se centra en la generación rápida de ajustes comunes de desenfoque, opacidad y borde. La herramienta relacionada puede usarse para exploración adicional de estilos.

Herramientas

Herramientas relacionadas

Continúa con otra herramienta traducida para una tarea cercana.

Generador de box-shadow CSS

Generador de box-shadow CSS — Controles visuales

Disponible

Ajusta visualmente el desplazamiento, el desenfoque, la propagación, el color, la opacidad y el inset. Previsualiza en vivo y genera el CSS de box-shadow para tarjetas, botones y superposiciones.

CSS Sombra box-shadow

Abrir herramienta

Generador de degradados CSS

Generador de degradados CSS — Lineal, radial, cónico

Disponible

Crea visualmente degradados CSS lineales, radiales y cónicos. Ajusta el ángulo y las posiciones de parada, añade varias paradas y copia el CSS para fondos, botones y transiciones de marca.

CSS Degradado Fondo

Abrir herramienta

Glassmorphism CSS

Glassmorphism CSS — Generador de estilo de tarjeta esmerilada

Disponible

Ajusta color, opacidad, desenfoque y contorno para previsualizar y generar CSS de tarjeta de cristal esmerilado con backdrop-filter. Útil para paneles translúcidos y capas de navegación; todo se ejecuta en el navegador.

CSS Glassmorphism backdrop-filter

Abrir herramienta