CSS Effects

CSS Shadows

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.

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>

Output

Browser Output

css

The heading will display a subtle shadow behind the text
The card will appear elevated with a soft shadow
The page will have a more modern and visually appealing appearance

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

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 Grid Layout Example NextCSS Gradients