Propiedad box-shadow

La propiedad box-shadow establece una sombra para el bloque. Como valor, la propiedad acepta 6 parámetros, enumerados separados por espacios, o la palabra clave none, que elimina la sombra completamente.

Sintaxis

selector {
	box-shadow: inset desplazamiento_x desplazamiento_y desenfoque tamaño_sombre color;
}

selector {
	box-shadow: none;
}

Parámetros

Parámetro	Descripción
`inset`	Parámetro opcional. Si se especifica, la sombra será interior al contenedor; si no se especifica, será exterior.
desplazamiento por x	Establece el desplazamiento de la sombra en el eje X. Un valor positivo desplaza hacia la derecha, un valor negativo hacia la izquierda.
desplazamiento por y	Establece el desplazamiento de la sombra en el eje Y. Un valor positivo desplaza hacia abajo, un valor negativo hacia arriba.
desenfoque	Establece el desenfoque de la sombra. Cuanto mayor sea el valor, más difuminada será la sombra. Parámetro opcional. Si no se especifica, la sombra será nítida.
tamaño de la sombra	Establece el tamaño de la sombra. Un valor positivo expande la sombra, un valor negativo, por el contrario, la contrae. Parámetro opcional. Si no se especifica, la sombra tendrá el mismo tamaño que el elemento.
color	Establece el color de la sombra en cualquier unidad de color. Parámetro opcional. Si no se especifica, el color de la sombra coincide con el color del texto.

Los desplazamientos por los ejes, el desenfoque y el tamaño de la sombra se especifican en cualquier unidad de tamaño, excepto porcentajes.

Ejemplo

En este ejemplo, la sombra se desplaza hacia abajo y hacia la derecha y se añade un pequeño desenfoque:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Ejemplo . Sombra nítida

En este ejemplo, la sombra se desplaza hacia abajo y hacia la derecha, pero no hay desenfoque (la sombra será nítida):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Ejemplo . Sombra uniforme

En este ejemplo, la sombra no se desplaza, pero se le añade desenfoque:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Ejemplo . Tamaño de la sombra

En este ejemplo, la sombra no se desplaza, el desenfoque es cero, pero se le añade tamaño (lo negro es el borde, lo rojo es la sombra):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Ejemplo . Desenfoque + tamaño de la sombra

En este ejemplo, la sombra no se desplaza, pero se le añaden desenfoque y tamaño (lo negro es el borde, lo rojo es la sombra):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Ejemplo . Sombra interior

En este ejemplo, la sombra se encuentra dentro del contenedor:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Véase también

la propiedad text-shadow,
que establece una sombra para el texto