Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

box-shadow

Introducción

La propiedad CSS box-shadow  describe uno o más efectos de sombra como una lista separada por comas. Permite proyectar una sombra difuminada en la estructura de casi cualquier elemento. Si un border-radius es especificado en un elemento con un box shadow, el box shadow asume las mismas esquinas redondeadas. El orden z de multiples box shadows es igual al los multiple text shadows (la primera sombra especificado en la parte superior).

Valor inicialnone
Applies toall elements. It also applies to ::first-letter.
Heredableno
Mediavisual
Valor calculadoany length made absolute; any specified color computed; otherwise as specified
Animatableyes, as a shadow list
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

box-shadow:  none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

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).
<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. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), el valor de la propiedad  color es usado.Sin embargo, La sombra de  WebKit es transparente  y por lo tanto inutil si el <color> es omitido.

Ejemplos

box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 5em 1em gold; 
box-shadow: 0 0 1em gold; 
box-shadow: inset 0 0 1em gold;

Especificaciones

Especificación Estado Comentario
CSS Backgrounds and Borders Module Level 3
The definition of 'box-shadow' in that specification.
Candidate Recommendation  

Compatibilidad del Navegador

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 (See note) 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
Multiple shadows 10.0
1.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
3.0 (WebKit 522)-webkit
inset keyword 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Spread radius 10.0
4.0-webkit
4.0 (2.0)
3.5 (1.9.1)-moz
9.0 10.5 5.1 (WebKit 534)
5.0 (WebKit 533)-webkit
Característica iOS Safari Opera Mini Opera Mobile Android Browser
Basic support

5.0
(Yes)-webkit

? ? ?
Multiple shadows 5.0
(Yes)-webkit
? ? ?
inset keyword 5.0
(Yes)-webkit
? ? ?
Spread radius 5.0
(Yes)-webkit
? ? ?

Notas

  • Desde la versión 5.5, Internet Explorer soporta DropShadow de Microsoft y el Filtro de Shadow. Usted puede usar esta extensión propietaria de lanzar una sombra difuminada (aunque la sintaxis y efectos son diferentes de CSS3).
  • Las sombras afectan a los mas antiguos Gecko, Presto, y WebKit; Por ejemplo, Si usted emite una sombra fuera de la caja con un  width de 100%, usted verá una barra de desplazamiento.
  • Gecko 13 (Firefox 13) eliminó el soporte para -moz-box-shadow. Desde entonces, solo la versión sin prefijo es compatible.
  • Con el fin de obtener box-shadow en IE9 a más, usted necesita establecer border-collapse a separate.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Sebastianz, Prinz_Rana, teoli, carloshs92
 Última actualización por: Sebastianz,