How to Create CSS Box Shadows

A good box shadow lifts a card off the page or makes a button feel pressable. The CSS is one property with a few values, and once you know the order, you can write or tweak shadows by hand. Here is how each part works.

The syntax

The box-shadow property takes its values in this order: offset-x, offset-y, blur-radius, spread-radius, color, plus an optional inset keyword.

box-shadow: 0 4px 12px rgba(0,0,0,0.15);

offset-x: how far the shadow moves left or right. Positive pushes right, negative pushes left.
offset-y: how far it moves up or down. Positive pushes down, which is what most shadows want.
blur-radius: how soft the edge is. 0 is a hard edge; higher numbers feather it out.
spread-radius: grows or shrinks the shadow size. Often skipped, but a small negative spread tightens it.
color: the shadow color. Low-opacity rgba is the trick for realism.

In the example above there is no horizontal offset, a small drop, a soft blur, and a faint black. That reads as a clean, modern lift.

Build one in seconds

Open the Box Shadow Generator.
Drag the offset, blur, and spread sliders and pick a color and opacity.
Copy the generated box-shadow rule into your stylesheet.

It previews live, so you see the result before you paste it.

Keep it soft and realistic

The most common mistake is a solid, dark shadow. Real shadows are diffuse and faint. Reach for a low-opacity color like rgba(0,0,0,0.1) or rgba(0,0,0,0.15) and let the blur do the work. A large offset with no blur looks like a sticker, not a shadow.

For depth, layer multiple shadows separated by commas. The browser stacks them, so a tight close shadow plus a wider soft one mimics how light actually falls:

box-shadow:
  0 1px 2px rgba(0,0,0,0.08),
  0 8px 24px rgba(0,0,0,0.12);

The first line grounds the element, the second gives it lift. You can build whole elevation systems this way, and the Box Shadow Generator lets you stack layers without counting commas.

Inset shadows

Add the inset keyword and the shadow falls inward instead of outward. This is how you create inner depth: pressed buttons, input fields, and inset panels.

box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

Same value order, just pointing in. Pair an inset shadow with a subtle background change to make a button look genuinely pushed.

Pairing a shadow with color depth? Use the CSS Gradient Generator.
Rounding corners before you shadow them? Try the Border Radius Visualizer.
Shadowing text instead of boxes? See the CSS Text Shadow Generator.

Keep the color faint, layer two shadows, and your UI gains depth in seconds.