10+ CSS Box Shadow Examples

What is a CSS box-shadow? The box-shadow CSS property lets you add one or more shadows to almost any element. Curious enough about CSS box-shadows? Why not try it yourself using our CSS box-shadow generator?

First off, let’s tackle what the box-shadow property values are and what they mean for you.

• offset-x : Placement of the shadow on the left or right sides of the element. Use a positive offset for shadows to the right side of the element and negative offsets for shadows to the left side of the element
• offset-y : Placement of the shadow on the top or bottom sides of the element. Use a positive offset for shadows on the bottom side of the element and a negative offset for shadows on the top side of the element
• blur-radius : Specifies the shadow’s blurriness. A larger blur radius results in larger, blurrier shadow.
• spread-radius : Specifies the size of the shadow. A larger positive value creates a larger shadow. A larger negative value creates a smaller shadow. Use negative spreads together with a larger blur radius to reduce shadows caused by pointy corners.
• inset : Changes the shadow to be located inside the element’s frame instead of outside. The way I think about insets is as if I were to look at shadows extending into a cave when I’m standing at the cave’s entrance in the day time.
• color : Color & opacity of the shadow

Here are 10 simple examples of box-shadows with their various properties filled in. There’s a bonus example at the bottom which showcases what we use here at Pagereview.

1. Box-shadow with bottom offset, blur, and spread

• box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.1);

Box-shadow with bottom offset, blur, and spread

2. Box-shadow with bottom offset, blur, and no spread

• box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);

Box-shadow with bottom offset, blur, and no spread

3. Box shadow with bottom and right offset, blur, and spread

• box-shadow: 3px 10px 30px 10px rgba(0, 0, 0, 0.1)

Box shadow with bottom and right offset, blur, and spread

4. Box shadow with bottom and left offset, blur, and spread

• box-shadow: -3px 10px 30px 10px rgba(0, 0, 0, 0.1);

Box shadow with bottom and left offset, blur, and spread

5. Box shadow with bottom offset, blur, and negative spread

• box-shadow: 0px 30px 80px -20px rgba(0, 0, 0, 0.25);

Box shadow with bottom offset, blur, and negative spread

6. Box shadow with zero offset, no blur, and spread

• box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.35);

Box shadow with zero offset, no blur, and spread

7. Box shadow with multiple shadows with overlapping bottom offsets, blur, and no spread

• box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.15), 0px 7px 10px rgba(0, 0, 0, 0.08);

Box shadow with multiple shadows with overlapping bottom offsets, blur, and no spread

8. Box shadow with multiple inset shadows with overlapping bottom offsets, blur, and spread

• box-shadow: inset 0px 10px 18px 2px rgba(0, 0, 0, 0.15), inset 0px 7px 10px rgba(0, 0, 0, 0.08);

Box shadow with multiple inset shadows with overlapping bottom offsets, blur, and spread

9. Box shadow with multiple different colored shadows with overlapping bottom and right offsets, no blur, and no spreads

• box-shadow: 10px 12.5px 0px #FF79CD, 20px 25px 0px #23049D;

Box shadow with multiple different colored shadows with overlapping bottom and right offsets, no blur, and no spreads

10. Box shadow with multiple different colored shadows with opposite offsets, no blur and no spreads

• box-shadow: -20px -25px 0px #FF79CD, 20px 25px 0px #23049D;

Box shadow with multiple different colored shadows with opposite offsets, no blur and no spreads

Bonus example. Here’s an actual example of what we’re currently using at Pagereview.

• box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);

Thank you for following along and please, feel free to use and modify these examples of CSS box-shadows for your own design projects and use cases.

Relevant Resources

MDN Web Docs on Box Shadows