Home 〉 CSS Tutorials 〉 CSS box-shadow Tutorial: Create Stunning Shadows with Examples

CSS box-shadow Tutorial: Create Stunning Shadows with Examples !

CSS box-shadow Tutorial: Create Stunning Shadows with Examples !

Want to give depth to your elements? The `box-shadow` property helps you add shadows around boxes, making them look raised or sunken. Learn how to control horizontal and vertical shadows, blur, spread, and color. You can also create inner shadows and multiple shadow layers.

Introduction

The 'box-shadow' property in CSS helps you create shadows behind elements like boxes, buttons, and cards. It adds depth and makes your design look more interactive and clean. This tutorial will walk you through everything you need to know — with easy examples and plain explanations.

What is 'box-shadow' in CSS?

The 'box-shadow' property applies a shadow to an element's frame (box). You can customize the shadow's position, blur, spread, and color.

Syntax:

Syntax ✍

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

  • offset-x: Horizontal shadow (positive = right, negative = left)
  • offset-y: Vertical shadow (positive = down, negative = up)
  • blur-radius: Softness of the shadow
  • spread-radius: Size of the shadow area
  • color: Shadow color
  • inset '(optional)': Makes the shadow appear inside the element

Example 1: Basic Shadow

Code : 1 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
width: 200px;
height: 100px;
background: lightblue;
box-shadow: 4px 4px 10px gray;
}

</style>
</head>
<body>

<div class="box">Box with Shadow</div>

</body>
</html>

output 📌

Box with Shadow
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • Shadow moves 4px right and 4px down.
  • It's blurred by 10px with a gray color.

Example 2: Inset Shadow (Inside the Box)

Code : 2 📝

<!DOCTYPE html>
<html>
<head>
<style>

.inset-box {
width: 200px;
height: 100px;
background: #fefefe;
box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.2);
}

</style>
</head>
<body>

<div class="inset-box">Inset Shadow</div>

</body>
</html>

output 📌

Inset Shadow
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • The 'inset' keyword makes the shadow appear inside the box.
  • It's great for giving elements a pressed or inner-glow effect.

Example 3: Multiple Shadows

Code : 3 📝

<!DOCTYPE html>
<html>
<head>
<style>

.multi-shadow {
width: 200px;
height: 100px;
background: #fff;
box-shadow: 2px 2px 5px red, -2px -2px 5px blue;
}

</style>
</head>
<body>

<div class="multi-shadow">Multiple Shadows</div>

</body>
</html>

output 📌

Multiple Shadows
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • You can stack multiple shadows by separating them with commas.
  • Great for creating glowing or layered effects.

Example 4: Hover Effect with box-shadow

Code : 4 📝

<!DOCTYPE html>
<html>
<head>
<style>

.hover-box {
width: 200px;
height: 100px;
background: #fff;
transition: box-shadow 0.3s;
}
.hover-box:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

</style>
</head>
<body>

<div class="hover-box">Hover Me</div>

</body>
</html>

output 📌

Hover Me
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

  • Adds a smooth shadow on hover using 'transition'.
  • Makes UI elements like buttons feel more interactive.

Tips for Using 'box-shadow':

  • Use rgba() for transparent shadows.
  • Don't overuse shadows; it may look too heavy.
  • Combine with 'border-radius' for modern card styles.
  • Test shadows on both light and dark backgrounds.

Uses of 'box-shadow' property

  • Cards & Panels: 'box-shadow: 0 4px 12px rgba(0,0,0,0.1);'
  • Buttons: 'box-shadow: 0 2px 6px rgba(0,0,0,0.2);'
  • Inset Effects:'box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);'

Conclusion

The 'box-shadow' property is one of the simplest ways to improve UI design using pure CSS. It adds depth, helps focus attention, and makes your elements stand out. Once you master its syntax and effects, you'll be able to build cleaner and more modern interfaces with ease.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

Can I apply multiple box shadows?

Yes! Use commas to add multiple shadows.

What's the difference between blur-radius and spread-radius?

Blur makes the shadow soft; spread changes its size or coverage.

How do I remove a box-shadow?

Set it to 'none' like: 'box-shadow: none;'.

Is box-shadow supported in all browsers?

Yes, it's supported in all major modern browsers.

Previous Post Next Post