Cómo se usa
- Indique el Desplazamiento horizontal y el Desplazamiento vertical de la primera capa. Un desplazamiento vertical positivo mueve la sombra hacia abajo.
- Aumente el Desenfoque para suavizar el borde, y la Expansión para hacer la sombra más grande o más pequeña que la caja.
- Elija un Color y una Opacidad. Añada más capas con Añadir una capa para una sombra más natural.
- Copie la declaración CSS y péguela en la regla de su elemento.
Cómo se forma el valor
La propiedad box-shadow admite una o varias sombras separadas por comas. Cada una se escribe con la palabra inset opcional, los desplazamientos horizontal y vertical, el radio de desenfoque, la distancia de expansión y un color. La primera sombra se dibuja encima de las demás, y sin sombra el valor es none.
El radio de desenfoque nunca es negativo. Un desenfoque mayor reparte la sombra con suavidad en una zona más amplia; una expansión agranda o reduce la sombra antes de aplicar el desenfoque. La opacidad se escribe como el valor alfa de un color rgba, con como máximo dos decimales.
box-shadow: [inset] offset-x offset-y blur spread color, ...Capas y lo que comprueba el editor
Una sombra suave y natural suele tener dos capas: una pequeña y oscura cerca de la caja y otra más grande y clara más alejada. Cada capa es una sombra del valor. El editor admite hasta 8 capas, desplazamientos y expansiones de −200 a 200 píxeles, desenfoques de 0 a 200 píxeles y opacidades de 0 a 100 %.
La vista previa usa el mismo valor que el código, así que lo que ve es lo que dibuja el navegador. Los desenfoques y las expansiones muy grandes tardan más en dibujarse en un teléfono antiguo, así que use los valores más pequeños que cumplan su función.
Ejemplo resuelto: una tarjeta con dos capas
La primera capa tiene un desplazamiento de 0 y 4 píxeles, con un desenfoque de 6 y sin expansión, en negro con una opacidad de 10 %. La segunda tiene un desplazamiento de 0 y 10 píxeles, con un desenfoque de 20, al 15 %. El valor es 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15).
Pegada en una tarjeta, da una sombra nítida bajo la tarjeta y suave más abajo.
Preguntas frecuentes
¿Qué hace inset?
Una sombra interior se dibuja dentro de la caja, a lo largo de sus bordes, como si la caja estuviera hundida. Es útil para campos de entrada y para un botón pulsado. Una caja puede tener sombras interiores y exteriores a la vez.
¿Por qué los desplazamientos tienen signo?
Un desplazamiento horizontal positivo lleva la sombra a la derecha y uno negativo a la izquierda. Un desplazamiento vertical positivo la lleva hacia abajo, así que una sombra que cae bajo una caja tiene un valor positivo.
¿Cuál es la diferencia entre desenfoque y expansión?
El desenfoque suaviza el borde de la sombra, que se desvanece en una zona más amplia. La expansión hace la propia sombra más grande, o más pequeña si es negativa, antes de desenfocarla. El desenfoque nunca baja de cero, pero la expansión sí puede.
¿El CSS generado es compatible con todos los navegadores?
La propiedad box-shadow sin prefijo, con varias capas separadas por comas y colores rgba, la admiten todos los navegadores actuales desde hace años. La declaración se puede usar tal cual, sin prefijo de proveedor.
¿El editor guarda o envía algo?
No. La sombra se dibuja en su navegador y no se guarda nada ni se envía a nuestro servidor. Copie el CSS antes de salir de la página, porque al recargarla vuelve la sombra predeterminada.
Fuentes
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.