CSS Effects

CSS Shadows

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Shadows properties are used to add shadow effects to elements and text on a webpage.

Shadows help create:

Depth and dimension
Visual emphasis
Modern UI designs
Better content separation

CSS provides two main shadow properties:

box-shadow -> Adds shadows to elements
text-shadow -> Adds shadows to text

Shadows are widely used in cards, buttons, images, modals, and typography. The supporting concepts are explained in CSS Opacity and CSS Filters.

Syntax

Box Shadow

Box Shadow Syntax

css

selector {
    box-shadow: horizontal vertical blur color;
}

Box Shadow Example

css

div {
    box-shadow: 5px 5px 10px gray;
}

Adds a shadow to the element.

Text Shadow

Text Shadow Syntax

css

selector {
    text-shadow: horizontal vertical blur color;
}

Text Shadow Example

css

h1 {
    text-shadow: 2px 2px 5px gray;
}

Adds a shadow to the text.

Attributes

Property	Description	Example
box-shadow	Adds shadow to an element	box-shadow: 5px 5px 10px gray;
text-shadow	Adds shadow to text	text-shadow: 2px 2px 5px black;
horizontal offset	Moves shadow left/right	5px
vertical offset	Moves shadow up/down	5px
blur radius	Controls shadow softness	10px

Example

CSS Shadows Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Shadows Example</title>
    <style>
        .card {
            width: 250px;
            padding: 20px;
            margin: 20px;
            background-color: white;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
        }
        h1 {
            text-shadow: 2px 2px 5px gray;
        }
    </style>
</head>
<body>
    <h1>CSS Shadows</h1>
    <div class="card">
        This card uses a box shadow.
    </div>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
box-shadow	10	12	4	5.1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

Positive horizontal values move shadows to the right.
Positive vertical values move shadows downward.
Higher blur values create softer shadows.
Multiple shadows can be applied.

Box Shadow Structure

css

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

Multiple Shadows

Multiple Shadows Example

css

box-shadow:
    2px 2px 5px gray,
    5px 5px 15px lightgray;

Inset Shadow

Inset Shadow Example

css

box-shadow: inset 0 0 10px gray;

Creates a shadow inside the element.

Text Shadow Example

css

text-shadow: 3px 3px 5px #999;

Conclusion

CSS Shadows help create depth, emphasis, and modern visual effects on web pages. By using box-shadow and text-shadow, you can enhance UI components, improve readability, and create more attractive designs with minimal effort.

PreviousCSS Input Fields NextCSS Gradients