CSS Box Shadow for Beginners: From Zero to Confident

Box-shadow looks complicated at first — five or six numbers in a row with no obvious meaning. Once you understand what each number controls, writing shadows from scratch takes about 10 seconds. Here is the complete breakdown.

The Five Shadow Values Explained

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

Example: box-shadow: 4px 8px 16px 0px rgba(0,0,0,0.15);

Value	What It Controls	Example
h-offset (4px)	Left/right position. Positive = right, negative = left.	4px = shadow to the right
v-offset (8px)	Up/down position. Positive = below, negative = above.	8px = shadow below element
blur (16px)	How blurry the shadow is. 0 = sharp, higher = softer.	16px = soft diffuse shadow
spread (0px)	How much larger/smaller the shadow is vs the element.	0px = same size as element
color (rgba)	The shadow color including transparency.	rgba(0,0,0,0.15) = 15% black

The spread value is optional. Most shadows leave it at 0. Only use spread when you want the shadow to extend beyond or shrink inside the element edges.

Writing Your First Box Shadow

Start simple. This is a clean card shadow that works for almost any UI:

.card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Breaking it down:

• 0 — no horizontal offset (shadow directly below)
• 2px — shadow 2px below the element
• 8px — 8px blur radius (soft edges)
• rgba(0, 0, 0, 0.1) — 10% black (subtle)

Try changing 0.1 to 0.3 to see the shadow strengthen. Change 2px to 8px to see it drop lower. These two values have the most visible effect — start experimenting there.

Sell Custom Apparel — We Handle Printing & Free Shipping

Understanding rgba Color for Shadows

Shadows almost always use rgba rather than hex. The reason: shadows look more natural with some transparency. A fully opaque shadow looks like a sticker, not a shadow.

/* Opaque shadow — harsh */
box-shadow: 0 4px 8px #000000;

/* Transparent shadow — natural */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);

The rgba format is: rgba(red, green, blue, opacity). For shadows, keep the first three values at 0 (black) and adjust opacity between 0.05 (barely visible) and 0.3 (strong).

Common Beginner Mistakes

Using too many values at once. Start with three: h-offset, v-offset, blur. Add color. Skip spread until you need it specifically.

Forgetting units. box-shadow: 0 4 8 rgba(0,0,0,0.1) does not work. Every length value needs a unit: 0px 4px 8px (or just 0 for zero — it does not need px).

Too much blur. A 60px blur on a small element looks smeared. Blur should generally be 2-3x the vertical offset. Offset of 4px yields blur of 8-12px.

Opacity too high. Beginners often set opacity to 1 (fully opaque). Real shadows are subtle. Start at 0.1, raise to 0.15 or 0.2 if needed.

Not using a tool. You do not have to guess values. A visual generator like the WildandFree box shadow generator lets you drag sliders and copy the exact CSS.

Adding Multiple Shadows

You can stack multiple shadows on one element by separating them with commas:

.card {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

This is how professional UI shadows look richer than a single value — the tight inner shadow defines the close shadow, the wider outer shadow adds ambient depth. Neither alone looks as realistic as the two together.

Frequently Asked Questions

What are the required box-shadow values?

The minimum valid box-shadow has two values: h-offset and v-offset. Example: box-shadow: 2px 4px. Without blur or color, it defaults to a sharp black edge. Most practical shadows include blur and color as well.

Can box-shadow have a negative value?

Yes. Negative h-offset moves the shadow left. Negative v-offset moves it above the element. Negative spread shrinks the shadow smaller than the element. All three are valid and useful.

Why does my box-shadow not show up?

Most common causes: a parent has overflow: hidden (clips the shadow), the shadow color matches the background, or there is a CSS specificity conflict overriding your declaration. Check the Computed styles in browser DevTools to confirm the value is applied.