How to Add Box-Shadow in CSS: Simple Guide with Examples

To add a shadow around an element in CSS, use the box-shadow property with values for horizontal offset, vertical offset, blur radius, spread radius, and color. For example, box-shadow: 5px 5px 10px rgba(0,0,0,0.5); adds a soft shadow below and to the right of the element.

Syntax

The box-shadow property adds shadow effects around an element's frame. It accepts several values:

• Horizontal offset: How far right (positive) or left (negative) the shadow moves.
• Vertical offset: How far down (positive) or up (negative) the shadow moves.
• Blur radius (optional): How blurry the shadow is; higher means softer edges.
• Spread radius (optional): How much the shadow size expands or shrinks.
• Color: The shadow color, often with transparency.

You can also add inset to make the shadow appear inside the element.

css

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

/* Example with all values */
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);

Example

This example shows a simple box with a soft shadow below and to the right. It demonstrates how box-shadow visually lifts the box from the background.

css

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}

.box {
  width: 200px;
  height: 150px;
  background-color: white;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

Output

A white rectangular box centered on a light gray background with a soft gray shadow offset down and right, giving a lifted effect.

Common Pitfalls

Common mistakes when using box-shadow include:

• Forgetting units like px for offsets and blur, which makes the property invalid.
• Using too large blur or spread values, causing shadows to look unnatural or too heavy.
• Not using transparent colors, resulting in harsh, solid shadows.
• Missing commas in color functions like rgba or using invalid color formats.

Always check your syntax carefully and preview the shadow effect in the browser.

css

/* Wrong: missing units and no transparency */
.box {
  box-shadow: 5 5 10 black;
}

/* Right: units and rgba color with transparency */
.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

Quick Reference

Remember these tips when using box-shadow:

• Use px units for offsets and blur.
• Start with small blur (5-15px) for subtle shadows.
• Use rgba colors for soft, transparent shadows.
• Try inset to create inner shadows.
• Multiple shadows can be added by separating with commas.

Key Takeaways

Use the box-shadow property with horizontal and vertical offsets, blur, spread, and color to add shadows.

Always include units like px and use rgba colors for transparent, natural shadows.

Avoid overly large blur or spread values to keep shadows subtle and realistic.

The inset keyword creates inner shadows inside elements.

Multiple shadows can be layered by separating values with commas.