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.
2️⃣ Negative Values in Box-Shadow
Negative offset values move the shadow to the opposite direction.
3️⃣ Multiple Box-Shadows
Multiple shadows can be applied using a comma-separated list.
4️⃣ Inset Box-Shadow
The keyword inset places the shadow inside the element.
5️⃣ Basic Text-Shadow
The text-shadow property adds shadow effects to text. You can control offset, blur, and color.
6️⃣ Negative Values in Text-Shadow
Negative offset values change the shadow direction for text.
7️⃣ Multiple Text-Shadows
Apply layered shadows to text using comma-separated shadow values.