Acerca de esta herramienta
La propiedad CSS box-shadow dibuja una o más sombras alrededor del marco de un elemento. Cada sombra es un conjunto de valores: una palabra clave inset opcional, los desplazamientos horizontal y vertical, un radio de desenfoque, un radio de expansión y un color. Varias sombras se separan por comas y se pintan de atrás hacia adelante, de modo que la primera de la lista queda encima. Superponer varias sombras de baja opacidad es la forma en que se construyen una elevación realista, una luz ambiental suave y los brillos internos — una sola sombra rara vez parece natural.
Úsalo para diseñar la elevación de tarjetas y ventanas modales, afinar efectos de anillo de foco y brillo interno, recrear una profundidad al estilo Material con capas apiladas, o prototipar rápidamente un estado de hover antes de fijarlo en tu hoja de estilos. Elige un preajuste para empezar, ajusta los deslizadores de cada capa, activa inset para sombras hundidas, y pega la regla generada directamente en tu CSS o en un valor arbitrario de Tailwind.
Los colores se emiten como rgba() para que el deslizador de opacidad se corresponda directamente con el canal alfa — el hex subyacente permanece intacto, lo que mantiene el valor fácil de ajustar a mano más adelante.
Preguntas frecuentes
¿Cómo creo una box-shadow en capas (multicapa)?
Proporciona varias definiciones de sombra separadas por comas en una sola declaración box-shadow. Cada capa se renderiza de forma independiente y se apila de atrás hacia adelante, con la primera sombra listada dibujada encima; combinar unas pocas capas de baja opacidad produce una profundidad más suave y realista que una sola sombra.
¿Cuál es la diferencia entre desenfoque y expansión en box-shadow?
El desenfoque es el cuarto valor y controla lo suave que es el borde de la sombra — valores más altos lo difuminan más. La expansión es el quinto valor opcional y agranda (positivo) o reduce (negativo) el tamaño de la sombra antes de aplicar el desenfoque, de modo que una expansión negativa aprieta la sombra contra el elemento.
¿Qué hace la palabra clave inset en box-shadow?
Añadir inset dibuja la sombra dentro de la caja del elemento en lugar de fuera de ella, creando un efecto hundido o de brillo interno. Sin inset, la sombra se pinta hacia afuera como una sombra proyectada normal.