CSS Shadow – Introduction

CSS Shadow – Introduction

CSS Shadow properties allow you to create depth and realism in web design by applying shadows to text and elements. Shadows can improve user interface (UI) clarity, draw attention to specific content, and create a more visually engaging layout without relying on external images.

---

Types of Shadows in CSS

• Text Shadow – Adds shadows to text elements
• Box Shadow – Adds shadows to boxes (divs, buttons, containers, etc.)

---

1. Text Shadow

The text-shadow property is used to apply shadow effects to text content.

Syntax

• horizontal-offset: Moves the shadow left or right
• vertical-offset: Moves the shadow up or down
• blur-radius: Optional; adds softness to the shadow
• color: Shadow color

Example: Text Shadow

---

2. Box Shadow

The box-shadow property is used to add shadow to containers like divs, buttons, and images.

Syntax

• spread-radius: Optional; controls shadow size expansion
• Other parameters work similarly to text-shadow

Example: Box Shadow

---

Inset Shadows

To create an inner shadow instead of outer, use the inset keyword:

---

Multiple Shadows

You can add multiple shadows separated by commas:

---

Key Takeaways

• text-shadow is used to apply effects to text, while box-shadow affects container elements
• You can control the position, blur, spread, and color of shadows
• The inset keyword creates internal shadows
• Shadows enhance UI design by adding depth and focus
• Use shadows sparingly to avoid visual clutter and maintain performance