box-shadow

La propiedad CSS box-shadow  añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.

{EmbedInteractiveExample("pages/css/box-shadow.html")}}

La propiedad box-shadow permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si border-radius es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples sombras de texto (la primera sombra definida se ubica hasta arriba).

Generador de Box-shadow es una herramienta interactiva que permite generar una box-shadow.

Sintaxis

/* Keyword values */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

Especifica una sola box-shadow utilizando:

Valores

inset
Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).
La presencia de la palabra clave inset  cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.
<offset-x> <offset-y>
Estos son dos valores <length> para definir el desplazamiento de la sombra. <offset-x> especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <offset-y> Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver<length> para posibles unidades.
Si ambos valores son 0, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <blur-radius> y/o <spread-radius> está establecido).
<blur-radius>
Este es el tercer valor <length>. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será 0 (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:

...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.

<spread-radius>
Este es el cuarto valor <length> . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será 0 (la sombra será del mismo tamaño del elemento).
<color>
Ver los valores de <color> para las posibles palabras claves y anotaciones.
Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad color, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.

Ejemplos

En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un outline en lugar de una tercera sombra).

HTML

<blockquote><q>You may shoot me with your words,<br/>
You may cut me with your eyes,<br/>
You may kill me with your hatefulness,<br/>
But still, like air, I'll rise.</q>
<p>&mdash; Maya Angelou</p>
</blockquote>

Podrías dispararme con tus palabras,
podrías cortarme con tus ojos,
podrías matarme con tu odio,
y aún, como el aire, levantarme.

-Traduccion-

CSS

blockquote {
  padding: 20px;
  box-shadow: 
       inset 0 -3em 3em rgba(0,0,0,0.1), 
             0 0  0 2px rgb(255,255,255),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}

HTML

<div><p>Hello World</p></div>

CSS

p {
  box-shadow: 0 0 0 2em #F4AAB9,
              0 0 0 4em #66CCFF;
  margin: 4em;
  padding:1em;
}

Cuando el x-offset, y-offset, y blur son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el border-radius es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un border-radius de cualquier otro valor, las esquinas habrían sido redondeadas.

Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del modelo de caja.

 

Especificaciones

Especificación Estado Comentario
CSS Backgrounds and Borders Module Level 3
La definición de 'box-shadow' en esta especificación.
Candidate Recommendation Definición inicial

cssinfo}}

Compatibilidad de los navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
box-shadowChrome Soporte completo 10
Notas
Soporte completo 10
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12Firefox Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Sin soporte 3.5 — 13
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Soporte completo 9
Notas
Soporte completo 9
Notas
Notas To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Notas Since version 5.5, Internet Explorer supports Microsoft's DropShadow and Shadow Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3)
Opera Soporte completo 10.5
Notas
Soporte completo 10.5
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari Soporte completo 5.1
Notas
Soporte completo 5.1
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Soporte completo 3
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo ≤37
Notas
Soporte completo ≤37
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Soporte completo ≤37
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 18
Notas
Soporte completo 18
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 4
Notas
Soporte completo 4
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Sin soporte 4 — 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo Si
Notas
Soporte completo Si
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Safari iOS Soporte completo 5
Notas
Soporte completo 5
Notas
Notas Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a width of 100%, then you'll see a scrollbar.
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android ?
insetChrome Soporte completo 10
Soporte completo 10
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12Firefox Soporte completo 4
Soporte completo 4
Sin soporte 3.5 — 13
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Soporte parcial 9
Notas
Soporte parcial 9
Notas
Notas To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Notas inset must be the last keyword in the declaration.
Opera Soporte completo 10.5Safari Soporte completo 5.1
Soporte completo 5.1
Soporte completo 5
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo ≤37
Soporte completo ≤37
Soporte completo ≤37
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 18
Soporte completo 18
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 4
Soporte completo 4
Sin soporte 4 — 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo SiSafari iOS Soporte completo 5
Soporte completo 5
Soporte completo 4.2
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android ?
Multiple shadowsChrome Soporte completo 10
Soporte completo 10
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12Firefox Soporte completo 4
Soporte completo 4
Sin soporte 3.5 — 13
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Soporte completo 9
Notas
Soporte completo 9
Notas
Notas To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Soporte completo 10.5Safari Soporte completo 5.1
Soporte completo 5.1
Soporte completo 3
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo ≤37
Soporte completo ≤37
Soporte completo ≤37
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 18
Soporte completo 18
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 4
Soporte completo 4
Sin soporte 4 — 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo SiSafari iOS Soporte completo 5
Soporte completo 5
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android ?
Spread radiusChrome Soporte completo 10
Soporte completo 10
Soporte completo 1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12Firefox Soporte completo 4
Soporte completo 4
Sin soporte 3.5 — 13
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Soporte completo 9
Notas
Soporte completo 9
Notas
Notas To use box-shadow in Internet Explorer 9 or later, you must set border-collapse to separate.
Opera Soporte completo 10.5Safari Soporte completo 5.1
Soporte completo 5.1
Soporte completo 5
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo ≤37
Soporte completo ≤37
Soporte completo ≤37
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 18
Soporte completo 18
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 4
Soporte completo 4
Sin soporte 4 — 14
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo SiSafari iOS Soporte completo 5
Soporte completo 5
Soporte completo 4.2
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Soporte parcial  
Soporte parcial
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también