CSS Box and Text Shadows

CSS shadows add depth and dimension to elements using box-shadow and text-shadow properties.

Shadow Properties

box-shadow adds shadows to element boxes.

Syntax: box-shadow: h-offset v-offset blur spread color;

text-shadow adds shadows to text.

Multiple shadows can be combined with commas.

Use inset keyword for inner shadows.

/* Basic box shadow */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Multiple shadows */
.elevated {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Inset shadow */
.inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Text shadow */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Glow effect */
.glow {
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
}