CSS: Shadow

In CSS, shadows are used to create visual depth and highlights on elements, giving a more three-dimensional look. There are two primary types of shadows: text shadows and box shadows.

Text Shadow

The text-shadow property adds shadow to text. It can accept multiple shadows separated by commas, each with the following values:

• Horizontal Offset: Required. Positive values shift the shadow right, and negative values shift it left.
• Vertical Offset: Required. Positive values shift the shadow down, and negative values shift it up.
• Blur Radius: Optional. The higher the value, the more blurred the shadow.
• Color: Optional. The color of the shadow.

Syntax

text-shadow: horizontal-offset vertical-offset blur-radius color;

Example

h1 {
    text-shadow: 2px 2px 4px #888888;
}

This example applies a shadow 2 pixels to the right and 2 pixels down from the text, with a 4-pixel blur radius and a grey color.

Box Shadow

The box-shadow property adds a shadow to elements (e.g., divs, buttons). It can accept multiple shadows separated by commas, each with the following values:

• Horizontal Offset: Required. Positive values shift the shadow right, and negative values shift it left.
• Vertical Offset: Required. Positive values shift the shadow down, and negative values shift it up.
• Blur Radius: Optional. The higher the value, the more blurred the shadow.
• Spread Radius: Optional. Positive values increase the size of the shadow, and negative values decrease it.
• Color: Optional. The color of the shadow.
• Inset: Optional. If present, changes the shadow from an outer shadow to an inner shadow.

Syntax

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color inset;

Example

div {
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

This example applies a shadow 5 pixels to the right and 5 pixels down from the element, with a 10-pixel blur radius, no spread, and a semi-transparent black color.

Example with Multiple Shadows

You can apply multiple shadows to the same element by separating each shadow with a comma.

p {
    text-shadow: 1px 1px 2px #333, 2px 2px 5px #666;
}

div {
    box-shadow: 2px 2px 4px #aaa, -1px -1px 2px #fff inset;
}

In this example:

• The paragraph text will have two shadows: one dark grey shadow slightly offset and another lighter grey shadow with more blur.
• The div will have two shadows: an outer shadow and an inset shadow that appears inside the element.

Tips for Using Shadows

1. Performance: Excessive use of shadows, especially with high blur values, can impact performance. Use them judiciously.
2. Readability: Ensure that shadows do not make text or elements hard to read.
3. Design Consistency: Use shadows consistently across your design to maintain a coherent look and feel.

Shadows in CSS are powerful tools to enhance the visual design of your web pages, adding depth and emphasis where needed.