How to Create a CSS Box Shadow: Step-by-Step Guide

The Syntax

box-shadow: offset-x offset-y blur-radius spread-radius color;

Blur and spread are optional; color defaults to the element's text color if left out entirely, though it's best practice to always specify it explicitly.

What Each Value Controls

• offset-x: shifts the shadow left (negative) or right (positive).
• offset-y: shifts the shadow up (negative) or down (positive) — most shadows use a positive value here, since light typically comes from above.
• blur-radius: how soft the shadow's edge is — 0 gives a hard edge, larger values spread it out into a soft gradient.
• spread-radius: grows or shrinks the shadow's size independent of the element itself — positive expands it, negative shrinks it.
• color: usually a translucent color (using rgba or hsl with an alpha value) rather than solid black, which tends to look more natural.

Step-by-Step

1. Set the offset to establish the shadow's direction.
2. Adjust blur until the edge softness looks right.
3. Adjust spread if you want the shadow larger or tighter than the element itself.
4. Pick a translucent color rather than solid black for a more natural look.
5. Copy the generated CSS into your stylesheet.

The Inset Keyword

Adding inset before the color flips the shadow to render inside the element's border instead of outside it, creating a recessed, pressed-in look rather than a raised, elevated one.