Parámetros
blur 18px / alpha 0.3
Salida
backdrop-filter: blur(18px)
Herramientas de diseño
Glassmorphism CSS — Generador de estilo de tarjeta esmerilada
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.
CSSGlassmorphismbackdrop-filter
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
Glassmorphism CSS
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.
GLASS
生成 CSS 代码
Casos de uso
- Crea fondos de tarjeta translúcidos
- Ajusta los parámetros de backdrop-filter
- Exporta estilos de panel y capa de navegación
Cómo usar
- Ajusta el color y la opacidad
- Define el desenfoque y el contorno
- Previsualiza y copia el CSS
Entrada y salida de ejemplo
FAQ
¿En qué característica CSS se basa?
Principalmente en backdrop-filter. Los navegadores no compatibles necesitan un fondo sólido u opaco de respaldo.
¿En qué se diferencia de la otra herramienta de glassmorphism?
Esta se centra en el color, la opacidad, el desenfoque y el contorno de la tarjeta conjuntamente. La otra exporta fragmentos esmerilados rápidos con valores predeterminados comunes y prefijos.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Neumorfismo CSS
Neumorfismo CSS — Generador de sombras Soft UI
Genera CSS de sombras neumórficas inset/outset a partir del color de fondo, la distancia y el desenfoque. Previsualiza aspectos en relieve y pulsado para botones, tarjetas y controles ligeros de Soft UI.
CSS Neumorfismo Sombra
Patrón de fondo CSS
Patrón de fondo CSS — Puntos, rayas y rejillas
Genera patrones de fondo CSS puros como puntos, rayas, cuadros y rejillas. Ajusta los colores y el tamaño y copia el CSS para rellenos decorativos, marcadores de posición y experimentos visuales.
CSS Fondo Patrón