Shadows in CSS: A Comprehensive Guide

Adding shadows in CSS is one of the easiest ways to bring depth and visual appeal to your web designs. Whether you’re designing buttons, cards, or entire layouts, shadows help make elements pop.

This blog will cover everything you need to create shadows in CSS.

Shadows

Shadows simulate depth and light, mimicking real-world objects. They make elements look elevated or inset. CSS provides two main properties for creating shadows:

box-shadow: For elements like divs, images, buttons, and containers.
text-shadow: Specifically for styling text.

“I like my shadow; it reminds me that I exist.” — Mehmet Murat ildan

1. Box-Shadow: Adding Depth to Elements

The box-shadow property is used to apply shadows to an element’s box. Here's the basic syntax:

css
.box-shadow {
  box-shadow: offset-x offset-y blur-radius spread-radius color;
}

Parameters:

Offset-X: Horizontal distance of the shadow. Positive values move it to the right; negative values move it to the left.
Offset-Y: Vertical distance of the shadow. Positive values move it down; negative values move it up.
Blur-Radius: How soft or blurry the shadow appears. Larger values create more diffusion.
Spread-Radius: Determines the size of the shadow. Positive values grow the shadow; negative values shrink it.
Color: The color of the shadow. You can use any CSS-supported color format.

Types:

Simple Shadow: Shadows outside the element.

css
.card {
  box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.2);
}

Inset Shadow: Shadows inside the element. Use the inset keyword.

css
.inset-card {
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
}

Multiple Shadows: Combine multiple shadows. Separate each shadow with a comma.

css
.multi-shadow {
  box-shadow: 2px 2px 5px gray, -2px -2px 5px lightgray;
}

2. Text-Shadow: Styling Your Text

Shadows aren’t just for boxes. The text-shadow property adds a shadow to the text. Its syntax is slightly simpler:

css
.text-shadow {
  text-shadow: offset-x offset-y blur-radius color;
}

Parameters:

Offset-X: Horizontal distance of the shadow. Positive values move it to the right; negative values move it to the left.
Offset-Y: Vertical distance of the shadow. Positive values move it down; negative values move it up.
Blur-Radius: How soft or blurry the shadow appears. Larger values create more diffusion.
Color: The color of the shadow. You can use any CSS-supported color format.

Examples

Let’s explore by doing some examples. Check all of them:

It will add a clearer and harder shadow.

css
.harder {
  box-shadow: rgba(120, 20, 20, 0.25) 0px 54px 55px, rgba(120, 20, 20, 0.12) 0px -12px 30px, rgba(120, 20, 20, 0.12) 0px 4px 6px, rgba(120, 20, 20, 0.17) 0px 12px 13px, rgba(120, 20, 20, 0.09) 0px -3px 5px;
}

It will add a soft and cool shadow.

css
.soft {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

It will add inset and cool shadow.

css
.inset {
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

It will make the text vibrant color for a blurry effect.

css
.blurry-text{
  color: transparent;
  text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff;
}

It will make the text look like 3D.

css
.threeD-text {
 color: #ff5733;
 text-shadow: 
        1px 1px 0 #333,
        2px 2px 0 #333,
        3px 3px 0 #333,
        4px 4px 0 #333,
        5px 5px 0 #333,
        6px 6px 0 #333,
        7px 7px 0 #333;
}

Conclusion

Shadows in CSS are more than just visual flair — they’re a way to add depth and dimension to your designs. With box-shadow and text-shadow, you can create effects ranging from subtle elegance to dramatic highlights. These tricks will work for everything. Even If you want to add shadows to images, for all. Experiment with different combinations, and don’t be afraid to get creative!

Try these out in your next project, and watch your designs come to life.