CSS box-shadow (Box Shadow)

The box-shadow property in CSS is used to add shadows to HTML elements, giving them depth and a 3D-like effect. It’s a versatile property that can create soft glows, floating cards, or inner shadows.

Basic Shadow

At its simplest, a shadow only needs horizontal and vertical offsets:

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

div {
      width: 200px;
      height: 100px;
      margin: 50px auto;
      background-color: #fff;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 100px;
      font-weight: bold;
      box-shadow: 8px 8px; /* Basic shadow */
    }

Output :

Shadow Color

You can specify the color of the shadow to match your design:

<div>This is a box with colored shadow</div>

div {
      width: 250px;
      height: 100px;
      margin: 50px auto;
      background-color: #fff;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 100px;
      font-weight: bold;
      box-shadow: 8px 8px yellow; /* Shadow with color */
    }

Output :

Blur Effect

The blur radius softens the shadow edges. Higher numbers make the shadow more blurred:

<div class="box">Blur Shadow</div>

.box {
      width: 250px;
      padding: 20px;
      margin: 50px auto;
      background: #fff;
      text-align: center;
      border: 1px solid #ddd;
      box-shadow: 10px 10px 5px lightblue; /* Blur effect */
      font-weight: bold;
    }

Output :

Spread Radius

The spread determines how big or small the shadow is:

 <div class="box">Spread Shadow</div>

.box {
      width: 250px;
      padding: 20px;
      margin: 50px auto;
      background: #fff;
      text-align: center;
      border: 1px solid #ddd;
      box-shadow: 10px 10px 5px 12px lightblue; /* Spread radius */
      font-weight: bold;
    }

Output :

Inset Shadow

By default, shadows are outside the element. Use inset to make them inside the element frame:

 <div class="box">Inset Shadow</div>

.box {
      width: 250px;
      padding: 20px;
      margin: 50px auto;
      background: #fff;
      text-align: center;
      border: 1px solid #ddd;
      box-shadow: 10px 10px 5px lightblue inset; /* Inset shadow */
      font-weight: bold;
    }

Output :

Multiple Shadows

You can apply more than one shadow by separating them with commas:

 <div class="box">Multiple Shadows</div>

 .box {
      width: 250px;
      padding: 20px;
      margin: 50px auto;
      background: #fff;
      text-align: center;
      border: 1px solid #ddd;
      box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green; /* Multiple shadows */
      font-weight: bold;
    }

Output :

Shadow Cards

Box shadows are perfect for creating card-style layouts with depth:

<div class="card">Shadow Card</div>

.card {
      width: 200px;
      padding: 20px;
      margin: 50px auto;
      background: #fff;
      text-align: center;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19); /* Card shadow */
      font-weight: bold;
    }

Output :