Adding Shadows in HTML

Shadows add depth and dimension to your web page, making your text stand out and your elements feel like they are lifted off the screen.

In modern web design, shadows are created using two CSS properties: text-shadow for text content and box-shadow for box-level elements (like a div or img).

Adding Shadows to Text

The text-shadow property accepts four main values. These are usually written in the following order:

1. Horizontal Offset: How far the shadow shifts to the right (positive value) or left (negative value).
2. Vertical Offset: How far the shadow shifts down (positive value) or up (negative value).
3. Blur Radius: How blurry the shadow is (higher number equals more blur).
4. Color: The color of the shadow (any valid CSS color value).

Adding Shadows to Boxes

The box-shadow property works similarly to text-shadow but has an additional spread value and an optional inset keyword.

The values are usually written in the following order:

• inset: (Optional) Placing this at the start or end will put the shadow inside the box.
• Horizontal Offset: Right/Left shift.
• Vertical Offset: Down/Up shift.
• Blur Radius: This affects how soft the edges are.
• Spread Radius: (Optional) How much the shadow grows or shrinks (positive grows, negative shrinks).
• Color: The shadow's color.

Here's an example that demonstrates two different box shadows:

Multiple Shadows

You can add multiple shadows to a single element by separating them with a comma (,). This is often used to create complex lighting or "glow" effects.