Sombra de cuadro CSS

Tabla de contenido

Propiedad CSS box-shadow

La propiedad CSS box-shadow se utiliza para aplicar una o más sombras a un elemento.

Especificar una sombra horizontal y vertical

En su uso más simple, sólo especifica una sombra horizontal y vertical. El color predeterminado de la sombra es el color del texto actual.

A <div> element with a box-shadow

Ejemplo

Especifique una sombra horizontal y vertical:

   div
{
  box-shadow: 10px 10px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>

Especificar un color para la sombra

El parámetro color define el color de la sombra.

A <div> element with a lightblue box-shadow

Ejemplo

Especifique un color para la sombra:

  div
{
  box-shadow: 10px 10px lightblue;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a lightblue box-shadow</div>

</body>
</html>

Agregar un efecto de desenfoque a la sombra

El parámetro desenfoque define el radio de desenfoque. Cuanto mayor sea el número, más borrosa quedará la sombra.

A <div> element with a 5px blurred, lightblue box-shadow

Ejemplo

Agrega un efecto de desenfoque a la sombra:

   div
{
  box-shadow: 10px 10px 5px lightblue;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a 5px blurred, lightblue box-shadow.</div>

</body>
</html>

Establecer el radio de extensión de la sombra

El parámetro spread define el radio de extensión. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra.

A <div> element with a blurred, lightblue box-shadow, with a spread radius of 12px

Ejemplo

Establezca el radio de extensión de la sombra:

   div
{
  box-shadow: 10px 10px 5px 12px lightblue;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue box-shadow, with a spread radius of 12px.</div>

</body>
</html>

Establecer el parámetro de inserción

El parámetro inset cambia la sombra de una sombra exterior (inicial) a una sombra interior.

A <div> element with a blurred, lightblue, inset box-shadow

Ejemplo

Agregue el parámetro de inserción:

   div
{
  box-shadow: 10px 10px 5px lightblue inset;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: coral;
  box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>A div element with a blurred, lightblue, inset box-shadow.</div>

</body>
</html>

Agregar múltiples sombras

Un elemento también puede tener múltiples sombras:

Ejemplo

   div
{
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
  margin: 20px;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
  margin: 20px;
}
</style>
</head>
<body>

<h1>Multiple Shadows</h1>

<div id="example1">
  <h2>Multiple shadows</h2>
  <p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>

<div id="example2">
  <h2>Multiple shadows with blur effect</h2>
  <p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>

</body>
</html>

Tarjetas

También puedes usar la propiedad box-shadow para crear tarjetas similares al papel:

1

January 1, 2021

Hardanger, Norway

Ejemplo

  div.card
{
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: 
center;
}

Pruébalo (Tarjeta de texto) →

<!DOCTYPE html>
<html>
<head>
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h1>Create Cards</h1>

<p>The box-shadow property can be used to create paper-like cards:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2021</p>
  </div>
</div>

</body>
</html>

Pruébalo (Tarjeta de imagen) →

<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h1>Create Polaroid Images</h1>

<p>The box-shadow property can be used to create polaroid images:</p>

<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>

Propiedades de sombra CSS

La siguiente tabla enumera las propiedades de sombra CSS:

box-shadow: Agrega una o más sombras a un elemento.
text-shadow: Agrega una o más sombras a un texto.