CSS Box Shadow: Complete Guide with Examples and Generator

What is CSS Box Shadow?

The box-shadow CSS property adds shadow effects to an element's frame. You can create subtle depth, dramatic drop shadows, glowing borders, or even multiple layered effects — all without using images. It's one of the most versatile tools in a front-end developer's CSS toolkit.

Box Shadow Syntax

The box-shadow property accepts one or more shadow layers, each defined by these values:

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

Value	Description	Required
`offset-x`	Horizontal offset. Positive = right, negative = left.	Yes
`offset-y`	Vertical offset. Positive = down, negative = up.	Yes
`blur-radius`	How soft the shadow is. Higher = more blur. Default: 0.	No
`spread-radius`	Shadow size. Positive = larger, negative = smaller than element.	No
`color`	Shadow color. Any valid CSS color. Default: current text color.	No
`inset`	If present, shadow appears inside the element.	No

Basic Shadow Examples

Here are several common box-shadow patterns you can use in your projects:

1. Simple Drop Shadow

/* Small subtle shadow */
.card {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

2. Heavy / Elevated Shadow

/* Large blur — element appears to float */
.modal {
  box-shadow: 0px 10px 30px rgba(0,0,0,0.3);
}

3. Sharp Border Shadow (No Blur)

/* Useful for duplicating a border effect */
.button {
  box-shadow: 4px 4px 0px 0px #333;
}

Inset Shadows

Adding the inset keyword creates an inner shadow — the shadow appears inside the element's border, giving a recessed or "pressed" look:

/* Inset shadow for pressed button effect */
.button:active {
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);
}

/* Inner glow */
.input-field:focus {
  box-shadow: inset 0px 0px 8px rgba(66, 133, 244, 0.5);
}

Colored Shadows

Modern CSS lets you use any color for shadows. This opens up creative possibilities for branding and UI accents:

/* Brand-colored shadow */
.brand-card {
  box-shadow: 0px 8px 20px rgba(255, 100, 50, 0.4);
}

/* Glow effect using a bright color */
.glow-button {
  box-shadow: 0px 0px 15px #00d4ff;
}

Multiple Shadows

You can stack multiple shadows by comma-separating them. They're rendered from front to back:

/* Multi-layered shadow for rich depth */
.card-layered {
  box-shadow:
    0px 1px 3px rgba(0,0,0,0.12),
    0px 4px 12px rgba(0,0,0,0.08),
    0px 10px 30px rgba(0,0,0,0.04);
}

/* Inner + outer shadow combined */
.card-pressed {
  box-shadow:
    inset 0px 0px 8px rgba(0,0,0,0.1),
    0px 2px 4px rgba(0,0,0,0.15);
}

Creating Realistic 3D Shadows

The most realistic shadows follow a principle from nature: the closer an object is to a surface, the sharper and darker its shadow; the farther it is, the softer and lighter. You can simulate this with layered shadows:

/* Realistic 3D shadow simulation */
.card-3d {
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.07),
    0px 2px 4px rgba(0,0,0,0.07),
    0px 4px 8px rgba(0,0,0,0.07),
    0px 8px 16px rgba(0,0,0,0.07);
}

/* Elevation on hover — object appears to rise */
.card-3d:hover {
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.05),
    0px 2px 6px rgba(0,0,0,0.05),
    0px 6px 14px rgba(0,0,0,0.05),
    0px 12px 30px rgba(0,0,0,0.05);
}

This technique — stacking multiple shadows with increasing blur — creates a smooth, natural depth curve that a single shadow cannot achieve.

Browser Compatibility and Prefixes

The box-shadow property is fully supported in all modern browsers (Chrome, Firefox, Safari, Edge) and does not require vendor prefixes. For legacy browser support (IE 9+), the unprefixed property works. No fallback is needed for current web projects, which makes box-shadow one of the safest CSS properties to use in production.

Hover Effects with Box Shadow

Transitioning box-shadow on hover creates a polished, interactive feel:

.card-hover {
  box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.card-hover:hover {
  box-shadow: 0px 8px 25px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

Always add transform: translateY(-2px) alongside the shadow increase — the combination of lift and deeper shadow looks far more realistic.

Performance Tips

Box shadows can impact rendering performance if used heavily. Keep these tips in mind:

Prefer opacity and transform over animating box-shadow directly. They're GPU-accelerated while box-shadow triggers repaints.
Use will-change: transform on elements with animated shadows to hint the browser.
Keep blur radius reasonable — blur values over 100px can be expensive on mobile devices.
Limit multiple shadows to 3-4 layers max. Each layer adds rendering cost.
Use ::before/::after pseudo-elements for complex shadow effects instead of deep nesting.

Try Our Visual Box Shadow Generator

Manual tweaking of box-shadow values can be tedious. Use our free online box shadow generator to visually design your shadows. You can adjust offset, blur, spread, and color in real-time, preview the result, and copy the CSS code instantly. It supports inset, multiple layers, and preset styles to jump-start your design.

Common Use Cases

Cards and containers — A soft drop shadow creates visual hierarchy on dashboards and galleries.
Buttons — Inset shadow on active state for tactile feedback; drop shadow on default for depth.
Modals and tooltips — Large blur-radius shadows separate overlays from the page content.
Input fields — Inset shadows give a natural recessed look; focus glow helps accessibility.
Navigation bars — A subtle bottom shadow separates the navbar from page content.

Conclusion

The CSS box-shadow property is surprisingly powerful. From simple drop shadows to complex layered effects, it's an essential tool for creating depth and visual hierarchy on the web. Start with basic offsets, experiment with colors, and try stacking multiple shadows for richer effects. And when you need to iterate quickly, use our box shadow generator to speed up your workflow.