Text Shadow
The text-shadow property is used to add a shadow effect behind text.
You can control the horizontal position, vertical position, blur, and color of the shadow.
How Text Shadow Works
Example 1: Basic Text Shadow
The text-shadow property can create a simple shadow behind text.
CSS Code
h2 {
text-shadow: 2px 2px;
}Output
CIIT Training Institute
Example 2: Shadow With Color
A color can be added to the shadow using the fourth value.
CSS Code
h2 {
text-shadow: 2px 2px blue;
}Output
Learn CSS at CIIT
Example 3: Shadow With Blur
The third value controls the blur radius of the shadow.
CSS Code
h2 {
text-shadow: 2px 2px 5px gray;
}Output
CIIT Training
Example 4: Soft Text Shadow
A larger blur value creates a softer and smoother shadow effect.
CSS Code
h2 {
text-shadow: 2px 2px 8px gray;
}Output
Welcome to CIIT
Text Shadow Syntax
text-shadow: horizontal vertical blur color;| Value | Purpose |
|---|---|
horizontal
|
Controls the horizontal position of the shadow |
vertical
|
Controls the vertical position of the shadow |
blur
|
Controls how soft the shadow appears |
color
|
Defines the shadow color |
Simple Explanation
2px 2px → Moves the shadow 2px horizontally and vertically.
2px 2px blue → Adds a blue shadow.
2px 2px 5px gray → Adds a gray shadow with 5px blur.
A higher blur value makes the shadow softer.
Summary
The text-shadow property adds a shadow
effect to text. It can control the shadow's
horizontal position, vertical position, blur,
and color.