Fondo
#e0e0e0
Salida
box-shadow: 9px 9px ...
Herramientas de diseño
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.
CSSNeumorfismoSombra
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.
设计配色
Neumorfismo CSS
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 代码
调整颜色、距离、模糊、圆角或形态后，预览和复制 CSS 会保持一致。
Casos de uso
- Ajusta sombras suaves de botones
- Añade profundidad ligera a tarjetas
- Compara controles en relieve frente a pulsados
Cómo usar
- Elige un color de fondo
- Ajusta la distancia y el desenfoque
- Previsualiza y copia el CSS
Entrada y salida de ejemplo
FAQ
¿Funciona bien con fondos oscuros?
Funciona mejor con fondos claros. Las interfaces osuras suelen necesitar colores de resaltado y sombra separados.
¿En qué se diferencia del generador de box-shadow?
Esta herramienta genera la combinación de sombra dual típica del neumorfismo. La herramienta general es mejor para desplazamientos, propagaciones y sombras por capas arbitrarias.
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
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
Glassmorphism CSS
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.
CSS Glassmorphism backdrop-filter