Qué es Constructor box-shadow CSS?
box-shadow es una de las propiedades CSS más utilizadas para agregar profundidad y elevación a los elementos, pero su sintaxis de múltiples valores puede ser confusa, especialmente al combinar offset, blur, spread, color y la palabra clave inset. Esta herramienta hace que la propiedad sea visual mostrando una vista previa en vivo mientras ajusta cada valor.
Respuesta rápida
Genere una declaración box-shadow ajustando desplazamiento, desenfoque, expansión, color e inset. La vista previa en vivo muestra la sombra en un div estático para que pueda ajustar los valores antes de agregarlos a su hoja de estilo.
Last updated: 2026-06-11
Limitaciones
- La vista previa es un div estático sin contexto circundante. Una sombra que se ve correcta de forma aislada puede verse diferente en una página real.
- La herramienta genera una sombra a la vez. Para sombras múltiples debe combinar los valores manualmente.
- box-shadow crea sombras que siguen la caja CSS del elemento. Para formas no rectangulares, use drop-shadow.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ajuste el desplazamiento horizontal y vertical para mover la posición de la sombra.
- Establezca el radio de desenfoque y la expansión para controlar la suavidad y el tamaño.
- Elija un color de sombra y active inset si la sombra debe aparecer dentro del elemento.
- Copie la declaración CSS generada y péguela en su hoja de estilo.
Para qué puedes usarla
- Agregar elevación sutil a tarjetas, modales y menús desplegables.
- Crear efectos de presión inset para botones y campos de formulario.
- Construir sombras en capas combinando múltiples valores box-shadow para profundidad realista.