How to Add Multiple Shadows in CSS: Syntax and Examples

To add multiple shadows in CSS, use the box-shadow or text-shadow property with comma-separated shadow values. Each shadow is defined by its offset, blur, spread, and color, and listing them separated by commas applies all shadows to the element.

Syntax

The box-shadow or text-shadow property accepts multiple shadows separated by commas. Each shadow includes:

• Horizontal offset (required): How far right (positive) or left (negative) the shadow is.
• Vertical offset (required): How far down (positive) or up (negative) the shadow is.
• Blur radius (optional): How blurry the shadow is; default is 0 (sharp).
• Spread radius (optional, box-shadow only): How much the shadow size expands or shrinks.
• Color (optional): The shadow color; default is black.

Separate multiple shadows with commas to apply them all.

css

box-shadow: 5px 5px 10px rgba(0,0,0,0.5), -3px -3px 5px rgba(255,0,0,0.7);

Example

This example shows a blue box with two shadows: one dark shadow offset to the bottom-right and one red shadow offset to the top-left.

css

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

.box {
  width: 150px;
  height: 150px;
  background-color: #007BFF;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.4), -6px -6px 10px rgba(255, 0, 0, 0.6);
  border-radius: 8px;
}

Output

A bright blue square centered on a light gray background with a soft black shadow on the bottom-right and a red shadow on the top-left, creating a layered shadow effect.

Common Pitfalls

Common mistakes when adding multiple shadows include:

• Forgetting to separate shadows with commas, which causes invalid CSS.
• Using incorrect order or missing required values like horizontal and vertical offsets.
• Not specifying colors, which defaults to black and may not be visible on dark backgrounds.
• Confusing box-shadow (for elements) with text-shadow (for text), which have slightly different syntax.

Always check your syntax carefully and test in the browser.

css

/* Wrong: missing comma between shadows */
.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5)  -3px -3px 5px rgba(255,0,0,0.7);
}

/* Correct: commas separate shadows */
.box {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5), -3px -3px 5px rgba(255,0,0,0.7);
}

Quick Reference

Tips for using multiple shadows:

• Use commas to separate each shadow.
• Define horizontal and vertical offsets first.
• Include blur and spread for softer or larger shadows.
• Specify colors with transparency for layered effects.
• Use box-shadow for elements and text-shadow for text.

Key Takeaways

Use commas to separate multiple shadows in the box-shadow or text-shadow property.

Each shadow needs horizontal and vertical offsets; blur, spread, and color are optional but useful.

Multiple shadows stack visually, creating layered effects on elements or text.

Always check syntax carefully to avoid missing commas or values.

Use box-shadow for element shadows and text-shadow for text shadows.