Nearby lessons
11 of 15CSS: Shadow (Box-Shadow & Text-Shadow)
📌 What are CSS Shadow Properties?
The box-shadow and text-shadow properties add shadow effects to elements and text, respectively. Shadows can be customized using offset values, blur radius, spread radius, color, and optional inset. Multiple shadows can be applied by separating them with commas.
1️⃣ Basic Box-Shadow Example
The box-shadow property adds a shadow around an element using horizontal offset, vertical offset, blur radius, and color.
Code Example
2️⃣ Negative Values in Box-Shadow
Negative offset values move the shadow to the opposite direction.
Code Example
3️⃣ Multiple Box-Shadows
Multiple shadows can be applied using a comma-separated list.
Code Example
4️⃣ Inset Box-Shadow
The keyword inset places the shadow inside the element.
Code Example
5️⃣ Basic Text-Shadow
The text-shadow property adds shadow effects to text. You can control offset, blur, and color.
Code Example
6️⃣ Negative Values in Text-Shadow
Negative offset values change the shadow direction for text.
Code Example
7️⃣ Multiple Text-Shadows
Apply layered shadows to text using comma-separated shadow values.