CSS
🎯 CSS text-shadow Property
The text-shadow property is used to add shadow effects to text in CSS.
It helps text stand out from the background and creates a more modern, depth-like visual appearance.
🔹 Basic Usage
CSS
p {
text-shadow: 2px 2px 5px gray;
}
➡️ This creates a gray shadow shifted 2px right, 2px down with a 5px blur.
📖 How It Works
- First value → horizontal shadow offset
- Second value → vertical shadow offset
- Third value → blur radius (softness)
- Last value → shadow color
🔹 Examples
1️⃣ Simple Shadow
CSS
h1 {
text-shadow: 3px 3px black;
}
➡️ Sharp black shadow without blur.
2️⃣ Soft Colored Shadow
CSS
h2 {
text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
}
➡️ Soft blurred shadow with transparency for a modern look.
3️⃣ Multiple Shadows
CSS
h3 {
text-shadow:
2px 2px 3px red,
-2px -2px 3px blue;
}
➡️ Creates a 3D effect using multiple colored shadows.
🔸 Special Values
- none → removes shadow
- initial → resets default behavior
- inherit → inherits from parent
💡 Summary
-
🧠 In Short
- The text-shadow property adds shadow effects to text.
- It improves readability and creates modern UI effects.
- It can be simple or layered for advanced visual designs.