Propiedad CSS box-shadow
La propiedad box-shadow te permite agregar varias sombras alrededor de un elemento especificando valores para el desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión, color y la palabra clave inset.
La propiedad box-shadow es una de las propiedades de CSS3.
Puedes agregar efectos separados por comas. Si especificas un border-radius en el elemento con una sombra de caja, la sombra adoptará las mismas esquinas redondeadas.
Estos son dos valores que establecen el desplazamiento de la sombra. El h-offset especifica la distancia horizontal. Los valores positivos colocan la sombra a la derecha del elemento. Los valores negativos la colocan a la izquierda. El v-offset especifica la distancia vertical. Un valor positivo coloca la sombra debajo del elemento, mientras que un valor negativo la coloca encima. Si ambos valores son 0, la sombra aparece directamente detrás del elemento.
El tercer valor es el radio de desenfoque. Es opcional. Cuanto mayor sea el número, más grande y difuso será el desenfoque. Los valores negativos no son válidos. Si se omite o se establece en 0, el borde de la sombra será nítido.
El cuarto valor es el radio de expansión. Es opcional. Los valores positivos hacen que la sombra se expanda, y los valores negativos hacen que se contraiga. Si se omite o se establece en 0, la sombra tendrá el mismo tamaño que el elemento.
El quinto valor es el color. Es opcional. Si se omite, la sombra toma por defecto el color de texto calculado del elemento.
El sexto valor es la palabra clave inset. Es opcional y puede colocarse en cualquier lugar de la definición de la sombra. Cuando está presente, crea una sombra interna en lugar de una sombra proyectada.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | No. |
| Animable | Sí. La sombra de la caja es animable. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.boxShadow = "15px 25px 35px gray"; |
Sintaxis
Sintaxis de la propiedad CSS box-shadow
box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;Probemos agregar sombras a un elemento.
Ejemplo de la propiedad box-shadow:
Ejemplo de la propiedad CSS box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: 5px 4px 10px #1c87c9;
}
</style>
</head>
<body>
<h2>Ejemplo de box-shadow</h2>
<div></div>
</body>
</html>Resultado
Múltiples sombras
Puedes separar con comas los valores de box-shadow varias veces. Por ejemplo, usar el siguiente código mostrará 3 sombras con múltiples colores y posiciones en el mismo elemento.
Ejemplo de uso de la propiedad box-shadow para agregar múltiples sombras al elemento:
Ejemplo de la propiedad CSS box-shadow con múltiples valores
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 50%;
height: 100px;
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
}
</style>
</head>
<body>
<h2>Múltiples sombras con box-shadow.</h2>
<div></div>
</body>
</html>Resultado
Ahora asignemos al elemento el valor inset. Esto agrega una sombra dentro de la caja.
Ejemplo de la propiedad box-shadow con el valor "inset":
Ejemplo de la propiedad CSS box-shadow con valor inset
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 50px;
background-color: #eee;
box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
}
</style>
</head>
<body>
<h2>Box-shadow con valor inset</h2>
<div></div>
</body>
</html>Resultado
Sombra en un solo lado
Para crear una sombra que aparezca solo en un lado de una caja, utiliza un valor negativo para el radio de expansión.
Propiedad CSS box-shadow
.shadow {
box-shadow: 0 10px 8px -4px yellow;
}Ejemplo de la propiedad box-shadow con un valor negativo de radio de expansión:
Ejemplo de la propiedad box-shadow
<!DOCTYPE html>
<html>
<head>
<style>
.shadow {
width: 100px;
height: 100px;
box-shadow: 0 10px 8px -4px yellow;
background-color: #cccccc;
}
</style>
</head>
<body>
<div class="shadow"></div>
</body>
</html>Valores
| Valor | Descripción | Probar |
|---|---|---|
| none | No se aplica ninguna sombra. | Probar » |
| h-offset | Obligatorio. El desplazamiento horizontal de la sombra. Un valor positivo coloca la sombra en el lado derecho de la caja, un valor negativo la coloca en el lado izquierdo. | Probar » |
| v-offset | Obligatorio. El desplazamiento vertical de la sombra. Un valor positivo coloca la sombra debajo de la caja, un valor negativo la coloca encima. | Probar » |
| blur-radius | Opcional. La sombra se difumina. Cuanto mayor sea el número, más difusa será la sombra. Los valores negativos no son válidos. | Probar » |
| spread-radius | Opcional. La sombra se expande. Un valor positivo aumenta el tamaño de la sombra, un valor negativo lo disminuye. | Probar » |
| color | Opcional. El color de la sombra. Si se omite, toma por defecto el color de texto del elemento. | Probar » |
| inset | Opcional. Una palabra clave opcional que puede colocarse en cualquier lugar de la definición de la sombra. Convierte una sombra externa en una interna. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué propiedades se pueden ajustar al definir una box-shadow en CSS?