Skip to content
PIXELVERSE

Box Shadow Generator

Set an elevation and get a natural, layered shadow, or build each layer by hand. Preview it on your own colors and copy CSS or a Tailwind class.

Smooth shadow

px

Builds stacked layers that each double in size, the way real light softens with distance.

Layers (4)

px
px
px
px
%

Preview

px
box-shadow:
    0px 2px 4px 0px rgb(11 19 32 / 0.15),
    0px 4px 8px 0px rgb(11 19 32 / 0.15),
    0px 8px 16px 0px rgb(11 19 32 / 0.15),
    0px 16px 32px 0px rgb(11 19 32 / 0.15);

How to use the box shadow generator

  1. Drag Elevation for an instant smooth shadow made of several layers.
  2. Select a layer to fine-tune its offset, blur, spread, color and opacity, or make it inset.
  3. Add up to eight layers for complex effects.
  4. Set the background, box color and corner radius to match your design.
  5. Copy the CSS or the Tailwind arbitrary-value class.

Why one shadow looks fake

Real shadows are sharp and dark close to an object and soft and faint further away. A single box-shadow can only do one of those. Stacking several layers, each with double the offset and blur of the one before and a lower opacity, reproduces the falloff. The Elevation slider builds exactly that stack.

Tips

  • Tint shadows with the background’s hue instead of pure black; dark navy or brown reads more naturally.
  • Keep the light source consistent: all shadows on a page should fall the same way.
  • Use bigger elevation for things that float (menus, dialogs) and little or none for things at rest.
  • Many layers with large blur cost rendering time on long scrolling lists; three or four is plenty.

Questions

What do the four numbers in box-shadow mean?

Horizontal offset, vertical offset, blur radius and spread radius, followed by the color. 'inset' at the start puts the shadow inside the box.

Can I use the result in Tailwind?

Yes. The Tailwind tab gives an arbitrary-value class such as shadow-[0_4px_12px_0_rgb(0_0_0/0.16)] that works without config.