En este artículo
¿Qué es CSS box-shadow?
La propiedad CSS box-shadow añade efectos de sombra alrededor del marco de un elemento. Es una de las propiedades CSS más utilizadas para crear profundidad y jerarquía visual en el diseño web. Una sola declaración box-shadow puede incluir desplazamientos horizontales y verticales, radio de desenfoque, radio de expansión y color.
Las sombras de caja se pueden superponer — puedes aplicar múltiples sombras a un solo elemento separándolas con comas. Esta técnica permite efectos sofisticados como profundidad realista, bordes brillantes y diseños neumórficos. La palabra clave inset invierte la sombra dentro del elemento para efectos de presión o hundimiento.
Cómo funciona nuestro generador
El generador de box-shadow de CheckTown proporciona una interfaz visual para crear sombras CSS. Ajusta los controles deslizantes, observa el resultado en tiempo real y copia el CSS cuando estés satisfecho con el efecto.
- Ajusta el desplazamiento X, desplazamiento Y, radio de desenfoque y radio de expansión con controles deslizantes intuitivos
- Elige el color de la sombra con control de opacidad, activa el modo inset y superpón múltiples sombras
- Empieza desde presets como Sutil, Medio, Grande o Brillo — luego personaliza para que coincida con tu diseño
Pruébalo gratis — sin registro
Crear una sombra →Cuándo usar sombras de caja
Las sombras de caja son esenciales para crear profundidad y jerarquía visual en las interfaces web modernas. Guían la mirada del usuario y comunican interactividad.
- Elevación de tarjetas y paneles — sombras sutiles elevan las tarjetas del fondo para crear una interfaz en capas
- Estados de botones — añade o profundiza las sombras al pasar el cursor para indicar interactividad y proporcionar retroalimentación táctil
- Modales y menús desplegables — sombras prominentes separan los elementos flotantes de la página inferior
Preguntas frecuentes
¿Afecta box-shadow al diseño o al rendimiento?
Las sombras de caja no afectan al diseño — son puramente visuales y no cambian el tamaño ni la posición del elemento en el flujo del documento. El rendimiento es generalmente excelente en navegadores modernos, pero radios de desenfoque muy grandes o muchas sombras superpuestas en elementos que se repintan frecuentemente pueden afectar la velocidad de renderizado.
¿Se puede animar box-shadow?
Sí, box-shadow se puede animar con transiciones CSS y keyframes. Sin embargo, animar box-shadow activa repintados, lo que puede ser costoso. Para un mejor rendimiento, considera animar la opacidad en un pseudo-elemento con una sombra fija en lugar de transicionar los valores de la sombra mismos.
¿Cuál es la diferencia entre box-shadow y drop-shadow?
box-shadow aplica una sombra rectangular a la caja del elemento (incluyendo su border-radius). filter: drop-shadow() aplica una sombra que sigue la forma real del elemento, incluyendo áreas transparentes en imágenes. Usa box-shadow para elementos de interfaz y drop-shadow para imágenes con transparencia.