CssHow-ToBeginner · 3 min read

How to Create Drop Shadow in CSS: Simple Guide

To create a drop shadow in CSS, use the box-shadow property on an element. It lets you add shadow effects by specifying horizontal and vertical offsets, blur radius, spread, and color.

📐

Syntax

The box-shadow property has this pattern:

horizontal offset: moves the shadow left or right
vertical offset: moves the shadow up or down
blur radius (optional): how blurry the shadow is
spread radius (optional): size of the shadow
color: shadow color

Example: box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);

css

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

💻

Example

This example shows a blue box with a soft gray drop shadow below and to the right.

html

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

.box {
  width: 150px;
  height: 150px;
  background-color: #007BFF;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}
</style>
<body>
  <div class="box"></div>
</body>

Output

A bright blue square box centered on a light gray background with a soft dark shadow offset to the bottom right.

⚠️

Common Pitfalls

Common mistakes when using box-shadow include:

Forgetting units like px for offsets and blur radius.
Using too large blur or spread values, making shadows look fuzzy or too big.
Not setting a color, which defaults to black and might not suit your design.
Using negative blur radius, which is invalid.

css

/* Wrong: missing units and negative blur */
.box-wrong {
  box-shadow: 5px 5px -10px rgba(0,0,0,0.5);
}

/* Right: correct units and positive blur */
.box-right {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

📊

Quick Reference

Property Part	Description	Example
Horizontal Offset	Moves shadow left (-) or right (+)	5px
Vertical Offset	Moves shadow up (-) or down (+)	5px
Blur Radius	How blurry the shadow is (optional)	10px
Spread Radius	Size of the shadow (optional)	0px
Color	Shadow color	rgba(0,0,0,0.5)

✅

Key Takeaways

Use the box-shadow property with horizontal and vertical offsets to create drop shadows.

Always include units like px for offsets and blur radius to avoid errors.

Adjust blur and spread values to control shadow softness and size.

Pick a shadow color that fits your design and provides good contrast.

Avoid negative blur radius as it is invalid in CSS.