How to Use CSS Box Shadow Effectively

The box-shadow property is simple to write and surprisingly easy to overuse. A well-judged shadow gives an interface depth and hierarchy; a heavy, harsh one makes it look amateur. The difference comes down to understanding what each value does and how real light behaves. Here is how to use box-shadow well.

The anatomy of box-shadow

A box-shadow is defined by up to six parts:

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

• offset-x — horizontal shift. Positive moves the shadow right.
• offset-y — vertical shift. Positive moves it down.
• blur-radius — how soft the shadow's edge is. Higher means softer and more diffuse.
• spread-radius — how much the shadow grows or shrinks before blurring. Positive expands it.
• color — the shadow's colour, almost always with some transparency.
• inset — an optional keyword that draws the shadow inside the element instead of outside.

Only the two offsets are required, but the others are where good shadows are made.

The secret: shadows fall down

The most common mistake is a shadow with equal offsets in every direction — a uniform glow around the element. Real shadows do not look like that.

In the real world, light usually comes from above. That means shadows fall downward: a small or zero horizontal offset, and a positive vertical offset. A glow that surrounds an element equally reads as artificial. A shadow that sits below it reads as depth.

Start every shadow with offset-x at or near 0 and a positive offset-y.

Keep shadows soft and subtle

Two more rules separate professional shadows from harsh ones:

• Use generous blur. A small blur radius produces a hard, dark edge that looks like a sticker. A larger blur spreads the shadow into a soft, believable gradient. When in doubt, blur more.
• Use transparency, never solid black. A pure #000 shadow is far too heavy. Use black at low opacity — something like rgba(0, 0, 0, 0.1) to 0.2). The shadow should be felt, not stared at.

A shadow you consciously notice is usually too strong.

Layer shadows for realism

The single biggest upgrade to your shadows: stack several of them. box-shadow accepts a comma-separated list, and real shadows are not one flat shape.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.06),
  0 16px 24px rgba(0, 0, 0, 0.05);

A tight, faint shadow grounds the element; a wider, softer one suggests it floating above the page. Together they mimic how light actually wraps an object, and the result looks dramatically more natural than any single shadow.

Build a consistent elevation system

Rather than inventing a shadow each time, define a small set of elevation levels and reuse them — typically three to five, from a subtle resting shadow to a pronounced lifted one.

• Low elevation for cards and resting surfaces.
• Medium for dropdowns and raised panels.
• High for modals and elements that float above everything.

The deeper the shadow (larger offset, blur and spread), the "higher" the element reads. Consistency here makes an interface feel coherent and intentional, and it pairs naturally with hover states that lift an element to the next level.

Inset shadows and other uses

The inset keyword draws the shadow inward, making an element look recessed — pressed buttons, input fields, inset wells. Used sparingly it adds tactile feedback; a pressed button with an inset shadow feels genuinely pushed.

A subtle box-shadow can also stand in for a hairline border, giving separation without a hard line. And remember dark mode: a dark shadow on a dark background is invisible, so dark themes often rely on subtle light borders or glows for elevation instead.

Frequently asked questions

What do the box-shadow values mean? In order: horizontal offset, vertical offset, blur radius, spread radius, colour, and an optional inset keyword. Only the two offsets are required.

Why do my shadows look fake? Usually equal offsets in all directions and too little blur. Real shadows fall downward — use a small horizontal offset, a positive vertical offset, and generous blur.

Should I use black for shadows? Not solid black. Use black at low opacity, around rgba(0,0,0,0.1) to 0.2). A fully opaque shadow looks heavy and unnatural.

How do I make shadows look more realistic? Layer several shadows with a comma-separated list — a tight faint one plus wider softer ones. Stacked shadows mimic real light far better than a single shadow.

What does the inset keyword do? It draws the shadow inside the element instead of outside, making it look recessed or pressed — useful for input fields and active buttons.

Build your shadow now

Design and fine-tune layered shadows with the free CSS Shadow Builder — adjust every parameter visually, stack multiple shadows, and copy production-ready CSS.