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 elementstext-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
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
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.