CSS Shadows

Adding Depth

CSS Shadows are used to create depth and elevation in your design. They make elements "pop" off the page, helping users distinguish between different layers of information and UI components.

Types of Shadows

• box-shadow — Adds depth to rectangular elements like cards and buttons.
• text-shadow — Applies shadows directly to text content for better readability or special effects.

Example Syntax

.card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.title {
  text-shadow: 2px 2px 4px rgba(236, 72, 153, 0.5);
}