CSS3 Shadows

CSS Shadow Effects

Adding Depth with Shadows

CSS allows you to add shadow effects to both text and element boxes, creating a sense of depth, emphasis, or visual style.

The key properties for this are:

• text-shadow: Applies shadow effects directly to text characters.
• box-shadow: Applies shadow effects to the box of an HTML element.

Browser Support

Both text-shadow and box-shadow properties are widely supported across all modern web browsers. Vendor prefixes are not required.

Text Shadow (text-shadow)

The text-shadow property adds one or more shadows to text. Each shadow is defined by an offset, an optional blur radius, and an optional color.

Syntax: text-shadow: h-offset v-offset [blur-radius] [color];

• h-offset: Horizontal offset (positive values move right, negative move left). Required.
• v-offset: Vertical offset (positive values move down, negative move up). Required.
• blur-radius: Optional. Larger values create more blur. Defaults to 0 (sharp shadow).
• color: Optional. Specifies the shadow color. Defaults to the element’s color property if omitted.

Example: Simple offset shadow:

.simple-text-shadow {
  /* 2px right, 2px down, black shadow */
  text-shadow: 2px 2px black;
}

Example: Offset shadow with blur and color:

.blurred-text-shadow {
  /* 2px right, 2px down, 5px blur, grey shadow */
  text-shadow: 2px 2px 5px grey;
}

Example: Soft ‘glow’ effect (no offset, only blur):

.glow-text {
  color: white;
  background-color: black; /* For contrast */
  /* White glow with 8px blur */
  text-shadow: 0 0 8px white;
}

Multiple Text Shadows

You can apply multiple shadows to text by providing a comma-separated list of shadow definitions.

Example: Multiple colored glows:

.multi-glow-text {
  color: white;
  background-color: #222;
  /* Red glow + Blue glow */
  text-shadow: 0 0 5px #FF0000, 0 0 10px #0000FF;
}

Example: Creating an outlined effect:

.outline-text {
  color: yellow;
  /* Create outline with multiple sharp shadows */
  text-shadow: -1px -1px 0 #000,
                1px -1px 0 #000,
               -1px  1px 0 #000,
                1px  1px 0 #000;
}

Box Shadow (box-shadow)

The box-shadow property adds one or more shadows to an element’s frame (its box). It follows the element’s shape, including border-radius.

Syntax: box-shadow: [inset] h-offset v-offset [blur-radius] [spread-radius] [color];

• inset: Optional keyword. If present, changes the shadow from an outer shadow (default) to an inner shadow.
• h-offset: Horizontal offset. Required.
• v-offset: Vertical offset. Required.
• blur-radius: Optional. Larger values increase blur.
• spread-radius: Optional. Positive values expand the shadow size, negative values shrink it. Defaults to 0.
• color: Optional. Specifies the shadow color.

Example: Simple outer shadow:

.simple-box-shadow {
  /* 5px right, 10px down, dark grey shadow */
  box-shadow: 5px 10px #555;
}

Example: Outer shadow with blur and spread:

.blurred-spread-shadow {
  /* 2px right, 2px down, 15px blur, 5px spread, light grey */
  box-shadow: 2px 2px 15px 5px lightgrey;
}

Example: Inner shadow (creates a pressed-in look):

.inner-shadow-box {
  background-color: #eee;
  /* Inset shadow: 1px right, 1px down, 3px blur, grey */
  box-shadow: inset 1px 1px 3px grey;
}

Multiple Box Shadows

Like text-shadow, you can apply multiple box shadows by providing a comma-separated list. This is often used to create more complex depth effects.

Example: Subtle layered shadow effect:

.layered-shadow {
  background-color: white;
  border-radius: 8px;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.1),
    0 2px 2px rgba(0,0,0,0.1),
    0 4px 4px rgba(0,0,0,0.1),
    0 8px 8px rgba(0,0,0,0.1);
}

Performance Considerations

While powerful, complex or numerous box-shadow effects, especially on large or frequently changing elements, can sometimes impact rendering performance. Use them judiciously, particularly if animations or transitions involving shadows are planned.

CSS Shadow Properties Summary

Property	Description
text-shadow	Adds one or more shadows to text content.
box-shadow	Adds one or more shadows to an element’s box frame.