CSS box-shadow Property

What You’ll Learn

The box-shadow property adds shadow effects around elements. You can control offset, blur, spread, color, and even stack multiple shadows to create depth, layering, and polished UI components like cards and buttons.

Definition and Usage

The box-shadow CSS property lets you attach one or more drop shadows to an element’s box. You can create multiple shadows separated by commas, and each shadow supports horizontal offset, vertical offset, blur radius, spread radius, color, and the optional inset keyword.

This property is versatile and widely used in modern web design. It adds depth and dimension to cards, buttons, navigation bars, and modals — helping users understand what is clickable and what sits above other content.

📝 Syntax

The syntax for box-shadow includes several parameters, but not all are required. The most basic usage only needs horizontal and vertical offsets:

selector {
  box-shadow: h-offset v-offset blur-radius spread-radius color;
}

Basic Example

.box {
  box-shadow: 10px 10px 5px gray;
}

Syntax Rules

• The initial value is none — no shadow until you set one.
• h-offset and v-offset are required lengths (can be negative).
• blur-radius and spread-radius are optional length values.
• color is optional; browsers use a default shadow color if omitted.
• Add inset at the start to draw the shadow inside the element.
• Separate multiple shadows with commas — first listed shadow appears on top.

💎 Property Values

Each part of a box-shadow declaration controls a different aspect of the shadow appearance.

Blur vs. Spread

Beginners often confuse blur and spread because both change the shadow size. Here is the difference:

• Blur-radius — Fades the shadow edges. A blur of 0 gives a sharp shadow; higher values make it softer and wider.
• Spread-radius — Grows or shrinks the shadow uniformly before blurring. Positive spread makes the shadow bigger; negative spread pulls it inward.

For a natural card elevation, use a small vertical offset, moderate blur, and little or no spread — for example: 0 4px 12px rgba(0, 0, 0, 0.12).

Examples Gallery

Try basic shadows, soft card elevation, inset inner shadows, and layered multiple shadows.

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px gray;
  }
</style>

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

<style>
  .card {
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  }
</style>

<article class="card">
  <h3>Card Title</h3>
  <p>Elevated with a soft shadow.</p>
</article>

<style>
  .pressed {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    background: #e2e8f0;
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.25);
  }
</style>

<button class="pressed">Pressed</button>

<style>
  .elevated {
    width: 10rem;
    height: 6rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(15, 23, 42, 0.08),
      0 8px 24px rgba(15, 23, 42, 0.12);
  }
</style>

<div class="elevated"></div>

💡 Best Practices