Box Shadow Generator

How to design a box shadow

A box shadow paints a soft copy of your element's shape behind it — the oldest trick for making flat web pages feel like they have depth. One line of CSS, and cards lift off the page.

1. Set the offsets. Vertical offset pushes the shadow down (positive) or up (negative); horizontal pushes it right or left. Zero both for an even glow.
2. Soften with blur. 0 is a hard edge — crisp but harsh; 20–30px is the soft, expensive-looking range most designs live in.
3. Shape with spread. Positive spread grows the shadow before blurring (bolder); negative spread shrinks it (crisper). 0 keeps it the element's size.
4. Pick a color and opacity. Real shadows are translucent black — 20–35% opacity looks natural. For neon glow effects, use a bright color instead.
5. Try inset for a pressed-in look, like buttons that are "on".

One shadow or many?

box-shadow accepts a comma-separated list — you can stack a soft wide shadow under a tight dark one for extra depth, like 0 2px 6px rgba(0,0,0,0.15), 0 12px 32px rgba(0,0,0,0.2). This builder makes one shadow at a time; paste several lines together when you want the layered look.

Soft shadows without the guesswork

The classic "lifted card" recipe is 0 12px 32px 0 rgba(0, 0, 0, 0.25): no horizontal shift, the shadow below, a big blur, no spread, and a quarter-opaque black. Start from the presets above and drag the sliders until it feels right — the preview shows exactly what your visitors will see.

What do the four numbers in box-shadow mean?

In order: horizontal offset (how far right or left), vertical offset (how far down or up), blur radius (how soft the edge is), and spread radius (how much the shadow grows). 0 0 0 0 means no shadow at all.

What does the inset keyword do?

Inset flips the shadow inside the box, so the element looks pressed or carved into the page instead of floating above it. It goes at the start of the value: inset 5px 5px 10px rgba(0, 0, 0, 0.5).

Why is my shadow invisible?

The three usual suspects: offsets of 0 with a small blur, opacity set to 0, or a shadow color identical to the background. Raise the blur, nudge the offsets, or check the opacity slider.

How do I put a shadow on only one side?

Use a single offset direction: a positive vertical offset puts the shadow below the box, a negative one above; positive horizontal goes right, negative goes left. Keep blur modest so it stays on that side.

What does the spread value do?

Spread grows or shrinks the shadow before blur is applied. Positive values make it bigger and bolder; negative values make it smaller and crisper. 0 keeps it exactly the element's size.

Is my data sent anywhere?

No. Everything runs in your browser with plain JavaScript. Nothing is uploaded or stored.