cssgridgen

CSS Box Shadow Generator

Stack layers, preview on any surface, copy CSS or Tailwind.

box-shadow
Surface
2 layers
box-shadow: 0px 4px 6px -1px rgb(15 23 42 / 0.1), 0px 10px 15px -3px rgb(15 23 42 / 0.12);

/* Tailwind */
shadow-[0px_4px_6px_-1px_rgb(15_23_42_/_0.1),0px_10px_15px_-3px_rgb(15_23_42_/_0.12)]
Free tool

Shadows that look like light, not like a border

A single box-shadow reads as flat. Real elevation is two or three layers working together, and the difference between "fine" and "obviously CSS" is usually the spread value. This lets you stack layers, tune each one, and check the result against the surface you will actually put it on.

How to use it

  1. Start from a preset

    Subtle, Elevated, Bottom only, Inset, Glow and Hard cover the shapes people actually ship. Each one is a real starting point, not a demo.

  2. Add layers

    Convincing shadows are two or three stacked layers — a tight dark one for contact and a wide soft one for ambience. Add up to six.

  3. Dial each layer

    Offset, blur, spread, colour and alpha per layer, plus an inset toggle for shadows drawn inside the box.

  4. Check it on your surface

    Change the background colour behind the preview. A shadow tuned on white usually disappears on grey.

The four values, in order

box-shadow: x y blur spread colour. The offsets move the shadow, blur softens its edge, and spread grows or shrinks it before blurring. Spread is the one most people skip, and it is the one that makes a bottom-only shadow possible: a negative spread pulls the shadow in from the sides while the Y offset still pushes it down.

Why two layers beats one

Physical shadows have a dark, tight core where the object nearly touches the surface, and a wide faint penumbra further out. One CSS shadow can be one or the other, not both. Stacking a small dark layer under a large soft one is what makes an elevation look like it belongs on the page rather than stuck to it.

Test on the real background

Shadows are tuned by eye against whatever is behind them, which is why so many of them vanish the moment a card moves from a white page onto a grey section. Change the surface colour in the preview before you commit to an alpha value.

Frequently asked questions

How do I make a box-shadow only on the bottom?
Use a negative spread roughly equal to the blur: box-shadow: 0 8px 6px -6px rgb(15 23 42 / 0.28). The negative spread pulls the shadow in from the sides while the Y offset still pushes it down. Zeroing the X offset is not enough, because blur spreads in every direction.
What does the spread value do in box-shadow?
It grows or shrinks the shadow before the blur is applied. Positive spread makes the shadow larger than the element on all sides; negative spread pulls it inward, which is how you stop a shadow leaking out of the edges.
How do I make an inner shadow in CSS?
Add the inset keyword: box-shadow: inset 0 2px 4px rgb(15 23 42 / 0.16). It draws the shadow inside the element instead of outside, which is how pressed buttons and recessed input wells are done. The rest of the syntax is identical.
Why do good shadows use more than one layer?
Because real shadows have a tight dark core where the object nearly touches the surface and a wide faint spread further out, and one CSS shadow can only be one of those. Stacking a small dark layer under a large soft one is what makes elevation look convincing.
Does box-shadow affect layout?
No. Shadows are painted outside the box model entirely, so they never change an element's size or move its neighbours. That is the practical difference between box-shadow and border, and why shadows are safe to add to a finished layout.
How do I use a custom box-shadow in Tailwind?
Use an arbitrary value with underscores for spaces: shadow-[0_8px_6px_-6px_rgb(15_23_42_/_0.28)]. The named utilities shadow-sm to shadow-2xl cover common elevations; anything custom needs the bracket form, which this tool emits.

Related tools