Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS Text Shadow
The CSS text-shadow property adds shadow effects to text. You can create simple shadows, colored shadows, blurred shadows, and even multiple shadows for creative text effects.
Syntax
selector {
text-shadow: h-offset v-offset blur-radius color;
}
Possible Values
| Value | Description |
|---|---|
h-offset |
Horizontal offset of the shadow (required) |
v-offset |
Vertical offset of the shadow (required) |
blur-radius |
Blur radius of the shadow (optional) |
color |
Color of the shadow (optional, defaults to current text color) |
Example: Various Text Shadow Effects
The following example demonstrates different text shadow variations −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f0f0f0;
}
h1 {
text-shadow: 2px 2px;
color: #333;
}
h2 {
text-shadow: 2px 2px red;
color: #333;
}
h3 {
text-shadow: 2px 2px 5px red;
color: #333;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
.glow {
text-shadow: 0 0 10px #FF0000;
color: #333;
}
.multiple {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
color: #333;
}
.complex {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Basic Shadow</h1>
<h2>Colored Shadow</h2>
<h3>Blurred Shadow</h3>
<h4>Dark Background Shadow</h4>
<h5 class="glow">Glowing Effect</h5>
<h6 class="multiple">Multiple Shadows</h6>
<p class="complex">Complex Shadow Effect</p>
</body>
</html>
Text elements with various shadow effects appear: - Basic shadow: Gray shadow offset by 2px right and down - Colored shadow: Red shadow with same offset - Blurred shadow: Red shadow with 5px blur radius - Dark background shadow: White text with black shadow for contrast - Glowing effect: Red glow around the text - Multiple shadows: Red and blue glow effects combined - Complex shadow: White text with layered black and blue shadow effects
Conclusion
The text-shadow property is a powerful tool for enhancing text appearance. You can combine multiple shadows with different colors and blur effects to create striking visual designs.
Updated on: 2026-03-15T12:04:05+05:30
243 Views
Advertisements