CodeKitHub¿Qué es esta herramienta?
box-shadow es la propiedad CSS que dibuja una sombra detrás (o dentro) de un elemento. Escrita a mano requiere hasta cinco valores en orden — desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y un color —, además de la palabra clave opcional inset, todo lo cual es fácil de confundir o de dejar demasiado sutil o demasiado intenso a la primera.
Esta herramienta lo convierte en manipulación directa: arrastra un control, observa cómo cambia la sombra en el cuadro de vista previa en vivo y copia el CSS exacto cuando quede bien. El selector de color junto con un control de opacidad genera automáticamente un valor rgba() correcto, ya que las sombras transparentes suelen verse mejor que las totalmente opacas.
¿Por qué utilizarlo?
- La vista previa se actualiza al instante con cada ajuste — ves la sombra exacta antes de comprometerte con el código.
- Control total sobre desplazamiento-x, desplazamiento-y, desenfoque, expansión, color y opacidad en un solo lugar.
- Un clic añade inset para un aspecto hundido o presionado en lugar de una sombra proyectada flotante.
- Genera CSS listo para pegar, con el color ya convertido a rgba() con la opacidad elegida.
- Se ejecuta enteramente en tu navegador — nada de lo que configuras se sube a ningún sitio.
- Gratis, sin registro, funciona en móvil.
Cómo utilizarlo
- Ajusta el desplazamiento X e Y para posicionar la sombra — valores positivos la mueven a la derecha/abajo, negativos a la izquierda/arriba.
- Aumenta el radio de desenfoque para suavizar el borde de la sombra; aumenta la expansión para que la sombra sea más grande que el propio elemento.
- Elige un color y ajusta la opacidad — las sombras más realistas usan entre 15 % y 40 % de opacidad en lugar de negro sólido.
- Marca 'inset' si quieres que la sombra aparezca dentro del borde del elemento en lugar de detrás de él.
- Copia el CSS generado y pégalo en tu hoja de estilos.
Ejemplo
Entrada
Desplazamiento: 0px, 10px · Desenfoque: 20px · Expansión: 0px · Color: negro al 35 % de opacidadResultado
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);Una sombra suave justo debajo del elemento sin desplazamiento horizontal — uno de los estilos de sombra más comunes para tarjetas y botones.
Una sombra vs. sombras en capas
Esta herramienta genera una única capa de sombra, suficiente para la gran mayoría de los casos reales — botones, tarjetas, modales y menús desplegables casi siempre usan una sola sombra. CSS también admite varias sombras separadas por comas en el mismo elemento para efectos de profundidad más elaborados (por ejemplo, una sombra oscura y ajustada bajo otra suave y ancha), pero es un refinamiento que puedes añadir a mano: genera una sombra aquí, duplica la línea, ajusta el segundo conjunto de valores y únelas con una coma.
Patrones habituales de box-shadow
- Elevación sutil de tarjeta: desplazamiento pequeño (0–4px), desenfoque moderado (8–16px), negro al 10–20 % de opacidad.
- Modal/menú elevado: desplazamiento (4–10px) y desenfoque (20–30px) mayores, opacidad del 20–35 % para una sensación de flotación más fuerte.
- Botón presionado/interno: marca inset, usa un desplazamiento pequeño y desenfoque moderado para que la sombra se lea como una hendidura en lugar de una elevación.
- Resplandor de color: elige un color de marca en lugar de negro, sube la opacidad al 40–60 % y aumenta ligeramente la expansión para un efecto de resplandor suave alrededor de botones.
- Sombra nítida/dura: pon el desenfoque en 0 y la expansión en 0 para una silueta desplazada y sólida en lugar de una sombra suave.
Combínalo con esquinas redondeadas
Las sombras y las esquinas redondeadas se usan juntas constantemente — tarjetas, botones y modales casi siempre combinan ambas. Usa el Generador de Border Radius para redondear las esquinas del mismo elemento y aplica ambas declaraciones CSS generadas juntas.
Preguntas frecuentes
¿Cuál es la diferencia entre desenfoque y expansión?
El radio de desenfoque suaviza el borde de la sombra — valores más altos hacen que se desvanezca más gradualmente. El radio de expansión cambia el tamaño de la sombra antes del desenfoque — una expansión positiva la hace más grande que el elemento por todos lados, una negativa la reduce. La mayoría de las sombras cotidianas usan desenfoque con la expansión en 0.
¿Por qué usar rgba() en lugar de un color hexadecimal plano para la sombra?
Una sombra totalmente opaca se ve dura y poco realista — las sombras reales siempre son algo transparentes, dejando ver ligeramente lo que hay detrás. rgba() te permite fijar esa transparencia directamente, por eso esta herramienta siempre genera el color con un valor alfa en lugar de un hexadecimal sólido.
¿Qué hace la palabra clave inset?
Sin inset, la sombra se dibuja fuera del borde del elemento, como si estuviera flotando sobre la página. Con inset, la sombra se dibuja dentro del borde, haciendo que el elemento parezca hundido o presionado — se usa habitualmente para estados activos/presionados de botones o campos de entrada.
¿Puedo apilar más de una sombra en el mismo elemento?
Sí — box-shadow en CSS acepta una lista separada por comas, y los navegadores las renderizan en el orden dado (la primera sombra queda encima). Una técnica habitual combina una sombra ajustada y oscura con otra más ancha y suave para una profundidad más realista que cualquiera de las dos por separado.
¿box-shadow afecta al diseño o solo a la apariencia?
Solo a la apariencia — box-shadow nunca afecta al tamaño del elemento ni a la posición de los elementos que lo rodean, incluso con valores grandes de desenfoque o expansión. Si la sombra se recorta visualmente, revisa si hay overflow: hidden en un elemento padre en lugar de los valores propios de la sombra.