Box Shadow Generator
Drag the sun to move the light; every layer turns to fall away from it.
Want a starting point? Browse the shadow gallery
Preview
Smooth shadow builder
Pick a height and softness and the builder writes 3 to 6 layered shadows for you. It replaces the current layers.
How far the surface floats above the page.
More softness adds layers and widens the blur.
180 casts the shadow straight down.
Layers
The first layer is painted on top.
Layer 1
Layer 2
Layer 3
Shadow code
How a box shadow is built
Every box-shadow layer is five values and a color: a horizontal and vertical offset, a blur radius, a spread and whether it is inset. Offsets move the shadow, blur softens its edge, and spread grows or shrinks it before the blur is applied. A negative spread is what keeps a large, soft shadow from peeking out around the sides of a card.
Several layers can be listed in one declaration. The browser paints the first layer on top, which is why the layer list here reads top to bottom and lets you reorder layers.
Why layered shadows look more natural
A real object casts a sharp, dark shadow close to it and a wide, faint one further away. A single box-shadow can only be one of those, so it tends to look either muddy or flat. The smooth shadow builder splits the shadow into three to six layers whose offset and blur grow on a curve while the total darkness is shared between them.
Elevation sets how far the surface appears to float, softness adds layers and widens the blur, and direction sets where the shadow falls. The result replaces the current layers, and you can fine-tune any of them afterwards.
Moving the light source
Drag the sun on the preview, or focus it and use the arrow keys, and every layer turns to fall away from the light. Layers keep their lengths relative to one another, and moving the light further from the centre lengthens the shadow. Centring the light, with Home, places it overhead and collapses the offsets.
Layers that point against the main shadow, such as the white highlight in a neumorphic pair, keep pointing toward the light, so soft UI effects survive being re-aimed.
Exports and their limits
The CSS output is a plain rule. The Tailwind v4 output defines a --shadow-* theme token, which creates a matching shadow-* utility, and also gives the equivalent arbitrary-value class with spaces written as underscores. The SCSS and CSS variable outputs give a named token you can reuse across components.
The PNG is drawn on a canvas at twice the preview size. Canvas has no spread or inset option, so both are reproduced by resizing the shape that casts the shadow and by clipping an inner frame. The result closely matches the browser but may differ by a pixel at the edges.
Frequently asked questions
Spread resizes the shadow before it is blurred: a positive spread makes it larger than the element and a negative one smaller. Blur then softens the edge over the given distance. Large blur with negative spread is the usual recipe for a soft, natural shadow.