CSS box-shadow is the one CSS property where a visual builder almost always beats typing the values by hand. There are five numbers per layer — four pixel values plus a color — and most interesting shadows use two or three layers, which means ten to fifteen numbers you have to get right to get the effect you want. Tweaking them with sliders while watching a live preview is just faster.
This generator lays out all five controls per layer as sliders you can drag. Add more layers with the button below the last one; remove any layer with its × button. The inset toggle on each layer lets you switch it between outer shadow (around the box) and inner shadow (pressed into the box). The preview at the bottom shows the result on a sample 160-pixel square, and the generated CSS updates every time you change anything. Copy it when you are done.
What the four numbers mean
A full box-shadow value looks like this:
The inset keyword is optional. The four pixel values are:
- Offset X ($X$): horizontal displacement. Positive values push the shadow right of the box; negative values push it left.
- Offset Y ($Y$): vertical displacement. Positive values push the shadow down; negative values push it up.
- Blur: how soft the edge of the shadow is. Zero produces a sharp rectangular copy of the box; higher values feather the edge outward by that many pixels on every side.
- Spread: how much bigger (or smaller) the shadow rectangle is than the box before blur is applied. Positive values grow the shadow; negative values shrink it.
Blur and spread interact in unintuitive ways — spread always happens before blur, so a spread of -10 with a blur of 20 gives a shadow that looks soft and small, while a spread of 10 with a blur of 20 gives a shadow that looks soft and big. Play with the sliders to build intuition.
Example: Material Design elevation
Material Design uses two-layer shadows to simulate light falling on a 3D object from above. The classic elevation-2 shadow is:
box-shadow:
0 1px 2px 0 rgba(0,0,0,0.2),
0 2px 6px 2px rgba(0,0,0,0.15);The first layer is a short sharp shadow that sits right under the object — this suggests the contact edge between the object and the surface below. The second layer is a longer softer shadow that fans out from under the object — this suggests ambient lighting from above. Combined, they produce a sense of depth that neither layer could give alone.
Try rebuilding that shadow in the generator by adding two layers and setting each to the values above. You will see the composited result on the preview square.
Example: pressed-in button
Set a layer to inset 0 2px 4px rgba(0,0,0,0.3) and you get the appearance of a button that has been pressed. The shadow is drawn inside the box and falls downward, creating the illusion that the top edge is lower than the rest — the same way a pressed key on a real keyboard looks.
Combine an inset shadow for the pressed effect with a second outer shadow for contact, and you can build convincing physical UI elements. Usable? Debatable. But fun.
Example: glow effect
A positive blur with a zero offset creates a glow. Set offsets to 0, blur to 20, spread to 0, and pick a saturated color like #3b82f6 — you get a soft blue halo around the box. Stack two glow layers with different blur radii for a more intense effect. To tune the glow toward a specific brand hue, the hex/RGB/HSL converter makes it easy to nudge saturation or lightness without shifting the core color.
Copying the CSS
The generated CSS at the bottom is a full box-shadow declaration including the semicolon, ready to paste into a stylesheet or a styled-components tagged template. Copy it with the button; the clipboard gets the exact text shown in the code block. There is no server round-trip — the text is built in your browser from the current slider values.
What this tool does not do
It does not parse existing box-shadow strings into sliders — you cannot paste a shadow from another source and edit it here. It does not handle browser-prefix variants (-webkit-box-shadow etc.) because those have been unnecessary for about a decade now. And it does not generate the related drop-shadow() filter, which works on alpha channels rather than box edges and requires a different mental model — that belongs in a separate tool. For backgrounds that blend colors rather than cast them as shadows, the CSS gradient generator is the matching builder.