Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How set the shadow color of div using CSS?
The CSS box-shadow property allows you to add shadow effects to any HTML element, including <div> elements. This property creates a visual depth effect by adding shadows with customizable colors, positions, and blur effects.
Syntax
selector {
box-shadow: h-offset v-offset blur spread color;
}
Property Values
| Value | Description |
|---|---|
h-offset |
Horizontal shadow position (positive = right, negative = left) |
v-offset |
Vertical shadow position (positive = down, negative = up) |
blur |
Optional. Blur radius higher values create more blur |
spread |
Optional. Spread radius positive values expand, negative values shrink |
color |
Shadow color (hex, rgb, rgba, or color names) |
Example 1: Basic Shadow with Color
The following example creates a simple purple shadow with horizontal and vertical offsets
<!DOCTYPE html>
<html>
<head>
<style>
.basic-shadow {
width: 300px;
height: 100px;
padding: 15px;
background-color: #E5E7E9;
box-shadow: 10px 10px #BB8FCE;
margin: 20px;
}
</style>
</head>
<body>
<div class="basic-shadow">This div has a purple shadow positioned 10px right and 10px down from the element.</div>
</body>
</html>
A light gray box with a solid purple shadow appears 10px to the right and 10px below the main element.
Example 2: Shadow with Blur Effect
Adding a blur radius creates a softer, more realistic shadow effect
<!DOCTYPE html>
<html>
<head>
<style>
.blur-shadow {
width: 300px;
height: 100px;
padding: 15px;
background-color: #D1F2EB;
box-shadow: 8px 8px 15px #5B2C6F;
margin: 30px;
}
</style>
</head>
<body>
<div class="blur-shadow">This div has a blurred purple shadow that creates a soft, realistic effect.</div>
</body>
</html>
A light green box with a blurred dark purple shadow that fades gradually from the element edges.
Example 3: Shadow with Spread Radius
The spread radius controls the size of the shadow positive values make it larger, negative values make it smaller
<!DOCTYPE html>
<html>
<head>
<style>
.spread-shadow {
width: 280px;
height: 80px;
padding: 15px;
background-color: #FCF3CF;
box-shadow: 5px 5px 10px 8px #FF6B6B;
margin: 40px;
}
</style>
</head>
<body>
<div class="spread-shadow">This shadow is expanded using a positive spread radius of 8px.</div>
</body>
</html>
A light yellow box with a large coral-colored shadow that extends 8px beyond the original shadow size in all directions.
Conclusion
The box-shadow property provides complete control over shadow effects for div elements. By adjusting the offset, blur, spread, and color values, you can create shadows ranging from subtle depth effects to dramatic visual impacts.
Updated on: 2026-03-15T18:01:39+05:30
296 Views
Advertisements