CSS box-shadow Property

The CSS box-shadow property adds shadow effects around an element's frame, creating depth and visual emphasis. It supports outer shadows, inner shadows, and multiple shadows on a single element.

Horizontal and vertical offsets control the shadow's position.
Blur and spread radii control its softness and size.
Multiple shadows can be applied using comma-separated values.

Example 1: Box Shadow with Blur, Spread, and Color

This example demonstrates different shadow sizes, blur effects, and colors using a single HTML structure.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS box-shadow Property</title>
    <style>
        .gfg1 {
            border: 1px solid;
            padding: 10px;

            /* box-shadow: h-offset v-offset blur */
            box-shadow: 5px 10px 10px;
        }

        .gfg2 {
            border: 1px solid;
            padding: 10px;
a<!DOCTYPE html>
<html>
<head>
    <title>CSS box-shadow Property</title>
    <style>
        .box {
            width: 220px;
            padding: 20px;
            margin: 30px;
            background-color: white;
            border: 1px solid #ddd;
        }

        .basic {
            box-shadow: 5px 10px 10px;
        }

        .spread {
            box-shadow: 5px 10px 10px 10px;
        }

        .colored {
            box-shadow: 5px 10px 15px 5px green;
        }
    </style>
</head>
<body>
    <div class="box basic">Basic Shadow</div>
    <div class="box spread">Shadow with Spread</div>
    <div class="box colored">Colored Shadow</div>
</body>
</html>
            /* box-shadow: h-offset v-offset blur */
            box-shadow: 5px 10px 28px;
        }
    </style>
</head>

<body>
    <div class="gfg1">
        <h1>Welcome to GeeksforGeeks!</h1>
    </div>
    <br><br>
    <div class="gfg2"> A computer Science portal </div>
</body>

</html>

Output: The first box displays a blurred shadow, the second has a larger shadow due to spread, and the third displays a green shadow.

Syntax

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

offset-x and offset-y are required length values.
blur-radius and spread-radius are optional.
color and inset are optional and can appear in different positions.
Multiple shadows can be separated by commas.

Example 2: Inset and Multiple Box Shadows

The inset keyword creates an inner shadow. Multiple shadows can be combined to produce layered effects.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Inset and Multiple Shadows</title>
    <style>
        .box {
            width: 220px;
            padding: 30px;
            margin: 30px;
            background-color: white;
            border: 1px solid #ddd;
        }

        .inset {
            box-shadow: inset 5px 5px 10px green;
        }

        .multiple {
            box-shadow:
                inset 0 0 10px rgb(0 128 0 / 40%),
                0 0 0 3px white,
                5px 8px 15px rgb(0 0 0 / 30%);
        }
    </style>
</head>
<body>
    <div class="box inset">Inset Shadow</div>
    <div class="box multiple">Multiple Shadows</div>
</body>
</html>

Output: The first box has an inner green shadow. The second box displays an inner shadow, a white outline-like shadow, and an outer shadow layered together.

CSS box-shadow Property Values

Value	Description
none	Default value; no shadow is applied.
offset-x	Horizontal position of the shadow. Positive values move it right; negative values move it left.
offset-y	Vertical position of the shadow. Positive values move it down; negative values move it up.
blur-radius	Controls shadow softness. Its default is 0, producing a sharp shadow. Negative values are invalid.
spread-radius	Controls shadow size. Positive values expand it; negative values shrink it.
color	Sets the shadow color. If omitted, the element's color value is used.
inset	Creates an inner shadow instead of an outer shadow.
initial	Resets the property to none.
inherit	Inherits the shadow value from the parent element.
unset	Acts as initial because box-shadow is not inherited.
revert	Reverts the property to the value established by the previous cascade origin.
revert-layer	Reverts the property to the value from the previous cascade layer.

CSS box-shadow Property Values

Explore