Crea sombras suaves multinivel y efectos de elevación realista listos para copiar.
La propiedad CSS box-shadow aporta profundidad visual, jerarquía espacial y sensación de elevación a los componentes de interfaces de usuario modernas. El diseño de sombras naturales y realistas exige abandonar las sombras duras tradicionales y combinar desplazamientos sutiles, radios de desenfoque generosos y capas múltiples superpuestas con niveles de opacidad reducidos.
Un diseñador de interfaces de usuario modela una tarjeta contenedora de contenido (card) con un acabado elegante de estilo neomorfo suave. En el generador configura una primera capa con desplazamiento horizontal X de 0 px, desplazamiento vertical Y de 8 px, radio de desenfoque de 24 px y expansión de -4 px con color negro a una opacidad del 8%. Añade a continuación una segunda capa superpuesta con desplazamiento vertical de 2 px, desenfoque de 6 px y opacidad del 4%. La combinación de ambas capas genera una sombra difusa y orgánica que simula una fuente de luz natural cenital sin bordes negros toscos. La herramienta permite alternar sombras interiores (inset), aplicar el efecto sobre fondos claros y oscuros, y copiar la regla CSS box-shadow lista para producción.
El renderizado se visualiza en tiempo real en el motor gráfico del navegador, permitiendo calibrar la elevación de botones, modales y tarjetas con total precisión pixel-perfect.
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> rgba(R, G, B, Opacidad)
Controla la proyección geométrica de la sombra definiendo el desplazamiento cartesiano, el desenfoque gaussiano, la expansión y el canal de color con transparencia alfa.
-4px) recoge los extremos laterales de la sombra, impidiendo que el efecto se extienda toscamente por los lados.inset al inicio de la declaración CSS. Esto proyecta la sombra hacia el interior de los bordes del elemento, simulando hendiduras o botones presionados.-webkit- o -moz-.