ES

Generador de box-shadow CSS

Elige una plantilla o ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad con los controles. Puedes superponer varias sombras y convertir cualquiera en sombra interior (inset). La vista previa se actualiza al instante y el código CSS se copia con un clic. También puedes pegar tu propio CSS abajo y seguir editándolo.

Ajustar la sombra

Plantillas

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Una sombra por línea, separadas por comas; p. ej. 0 4px 12px rgba(0, 0, 0, 0.12)
Tus datos se guardan solo en este navegador.

Resultado

Declaración CSS
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Sombras (la primera queda encima)
N.ºDesplazamiento X (px)Desplazamiento Y (px)Desenfoque (px)Expansión (px)ColorTipo
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)exterior
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)exterior
Cuánto sobresale la sombra de la caja (aprox.)
arriba 10 px · derecha 20 px · abajo 30 px · izquierda 20 px

Cómo se calcula

Cómo funciona box-shadow

Según la especificación del W3C (CSS Backgrounds and Borders Level 3), una sombra se compone de dos a cuatro longitudes, un color opcional y la palabra clave opcional inset:

ValorSignificado
1.ª longitudDesplazamiento horizontal a la derecha (negativo: a la izquierda)
2.ª longitudDesplazamiento vertical hacia abajo (negativo: hacia arriba)
3.ª longitudRadio de desenfoque, nunca negativo; 0 si se omite
4.ª longitudExpansión (spread): agranda la sombra; un valor negativo la reduce
Colorsi se omite, se usa el color del texto (currentColor)
insetdibuja la sombra dentro de la caja

Separa varias sombras con comas. La primera sombra se pinta encima y las demás detrás. Las sombras no afectan al diseño ni crean barras de desplazamiento, pero un contenedor con overflow: hidden las recorta.

¿Hasta dónde llega el desenfoque?

La especificación exige un desenfoque que se aproxime a uno gaussiano con una desviación estándar igual a la mitad del radio de desenfoque. La transición mide así unas dos veces el valor de desenfoque y queda centrada en el borde de la sombra: hacia fuera llega aproximadamente un radio de desenfoque.

Ejemplo 0 10px 25px -5px: el borde queda a 25 − 5 = 20 px de la caja, desplazado 10 px hacia abajo. La sombra sobresale unos 20 − 10 = 10 px arriba, 20 px a los lados y 20 + 10 = 30 px abajo. El generador muestra estos valores en «Cuánto sobresale la sombra»: útiles como padding para que nada se recorte.

Usos habituales

Preguntas frecuentes

¿Qué diferencia hay entre blur y spread?

El desenfoque (3.er valor) suaviza el borde sin cambiar la superficie de la sombra. La expansión (4.º valor) agranda o reduce la superficie misma antes de desenfocarla. Con desenfoque 0 y expansión positiva obtienes un contorno nítido.

¿Cómo superpongo varias sombras?

Sepáralas con comas, p. ej. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). La primera sombra se dibuja encima. En el generador añades más con «+ Sombra».

¿Por qué se corta mi sombra?

Las sombras no cuentan para el tamaño del elemento. Si un contenedor tiene overflow: hidden u overflow: auto, recorta todo lo que sobresale. Dale al contenedor al menos el padding que el generador indica como sobresaliente.

¿box-shadow funciona en todos los navegadores?

Sí. box-shadow, con varias sombras, inset y colores rgba(), funciona sin prefijos en todos los navegadores actuales. El generador escribe los colores transparentes como rgba(), que también entienden los navegadores antiguos.

Fuentes y base legal

Última actualización:

Herramientas relacionadas