The CSS box-shadow property is used to add shadow effects around an element's frame. Shadows help create depth, separation, and emphasis in web design, making elements look like they are floating above the page.
none.Syntax:
.element {
/* h-offset v-offset blur-radius spread-radius color inset */
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.5);
}
| Value | Description |
|---|---|
h-offset |
(Required) Horizontal position. Positive values move the shadow to the right; negative values move it to the left. |
v-offset |
(Required) Vertical position. Positive values move the shadow down; negative values move it up. |
blur-radius |
(Optional) Adds a blur effect. The higher the value, the bigger and softer the blur. Defaults to 0. |
spread-radius |
(Optional) Adjusts the physical size of the shadow. Positive values expand it; negative values shrink it. Defaults to 0. |
color |
(Optional) Defines the shadow's color (using hex, rgb, rgba, etc.). |
inset |
(Optional) Changes the shadow from an outer shadow (drop shadow) to an inner shadow. |
none |
The default value; no shadow is applied. |
initial |
Resets the property to its default value. |
inherit |
Inherits the property from the parent element. |
Here are practical examples to help you understand how to use the CSS box-shadow property effectively.
In this example, we apply a horizontal offset of 5px, a vertical offset of 10px, and a blur radius. The second element uses a larger blur radius (28px), giving it a much softer, more diffused effect.
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
border: 2px solid navy;
padding: 20px;
background-color: lightblue;
margin-bottom: 40px;
/* h-offset v-offset blur color */
box-shadow: 5px 10px 10px gray;
}
.box2 {
border: 2px solid navy;
padding: 20px;
background-color: lightblue;
/* h-offset v-offset blur color */
box-shadow: 5px 10px 28px gray;
}
</style>
</head>
<body>
<div class="box1">
<strong>IntricateDevo:</strong> Standard 10px Blur
</div>
<div class="box2">
<strong>IntricateDevo:</strong> Softer 28px Blur
</div>
</body>
</html>
This example adds a spread value. Spread physically grows the shadow before the blur is applied. The first box has a spread of 10px, while the second box has a spread of 20px, making the shadows appear larger and more commanding.
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
border: 2px solid navy; padding: 20px;
background-color: #f4f4f9; margin-bottom: 40px;
/* h-offset v-offset blur spread color */
box-shadow: 5px 10px 10px 10px lightgray;
}
.box2 {
border: 2px solid navy; padding: 20px;
background-color: #f4f4f9;
/* h-offset v-offset blur spread color */
box-shadow: 5px 10px 28px 20px lightgray;
}
</style>
</head>
<body>
<div class="box1">10px Spread</div>
<div class="box2">20px Spread</div>
</body>
</html>
Using rgba() is the best practice for shadows because it allows you to lower the opacity, making the shadow semi-transparent so the background behind it shows through naturally.
<!DOCTYPE html>
<html>
<head>
<style>
.solid-color {
border: 2px solid navy; padding: 20px;
margin-bottom: 40px; background-color: white;
box-shadow: 8px 8px 15px navy;
}
.transparent-color {
border: 2px solid navy; padding: 20px;
background-color: white;
/* Highly recommended: RGBA for subtle transparency */
box-shadow: 8px 8px 15px rgba(0, 0, 128, 0.3);
}
</style>
</head>
<body style="background-color: #e8eaf6;">
<div class="solid-color">Harsh Solid Navy Shadow</div>
<div class="transparent-color">Smooth Transparent Navy Shadow</div>
</body>
</html>
By adding the inset keyword anywhere in the value declaration, the shadow is drawn inside the element's border. This creates a recessed, pressed-in effect.
<!DOCTYPE html>
<html>
<head>
<style>
.inset-box {
padding: 30px;
background-color: lightblue;
color: navy;
font-weight: bold;
text-align: center;
/* Creates an inner shadow */
box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="inset-box">
I look like I have been stamped into the page!
</div>
</body>
</html>
You can layer multiple shadows on a single element by separating them with a comma. This is commonly used to create glowing effects or complex borders.
<!DOCTYPE html>
<html>
<head>
<style>
.multi-shadow {
padding: 30px;
background-color: white;
text-align: center;
font-weight: bold;
color: navy;
/* First shadow is light blue, second is navy */
box-shadow:
5px 5px 0px lightblue,
10px 10px 0px navy;
}
</style>
</head>
<body>
<div class="multi-shadow">
Layered Shadows
</div>
</body>
</html>
If an element inherits a shadow or has one applied globally, you can remove it by setting the property to initial or none.
<!DOCTYPE html>
<html>
<head>
<style>
.global-shadow {
border: 2px solid navy; padding: 20px;
box-shadow: 5px 5px 10px gray;
margin-bottom: 20px;
}
.no-shadow {
/* Resets the shadow to its default value (none) */
box-shadow: initial;
}
</style>
</head>
<body>
<div class="global-shadow">I have a shadow!</div>
<div class="global-shadow no-shadow">My shadow was reset using 'initial'!</div>
</body>
</html>
The box-shadow property is widely supported across all modern web browsers:
Note: Older versions of Internet Explorer below IE 9 do not support the box-shadow property. While vendor prefixes like -webkit- and -moz- were once used, they are completely unnecessary in modern development.
Which keyword is used to make a box-shadow appear inside the element rather than outside?