Box shadow generator
Stack shadow layers, tune each one with sliders, and watch the preview update live. When it looks right, copy the full box-shadow rule with one click.
How CSS box shadows work
The box-shadow property takes five parts per layer. The first two numbers are the horizontal and vertical offset. The third is the blur radius, which softens the edge. The fourth is spread, which expands or contracts the shadow before it blurs. The last value is the color, usually written as an rgba() so you can control opacity.
A single shadow can look flat and heavy. The trick professional interfaces use is layering: one tight, darker shadow close to the element for definition, and one wider, lighter shadow further out for ambient depth. That is why this tool is built around layers rather than a single set of sliders.
Recipes worth stealing
- Subtle card: a 2px vertical offset with an 8 percent black at 4px blur reads as a gentle lift off the page.
- Floating panel: add a second layer around 12px down, 28px blur, negative spread, at 14 percent, for a modern elevated look.
- Pressed input: switch a layer to inset with a small blur to suggest a recessed field.
Performance notes
Shadows are cheap to render but not free. Very large blur values on elements that animate can cost frames on lower end devices. If you are animating, prefer transforming a separate shadow element or keep blur modest. For static layouts, layer freely.
Frequently asked questions
What does each box-shadow value mean?
A CSS shadow is offset X, offset Y, blur radius, spread radius and a color. Positive Y pushes the shadow down, blur softens the edge, and spread grows or shrinks the whole shadow before it blurs.
How do I layer multiple shadows?
The box-shadow property accepts a comma separated list. HueKit lets you add as many layers as you want, and stacks them in the same order, which is how designers build soft, realistic depth.
What is an inset shadow?
An inset shadow is drawn inside the element instead of behind it, which reads as a pressed or recessed surface. Toggle inset on any layer to switch it.
Why use low opacity colors for shadows?
Real shadows are soft and semi transparent. Stacking two or three low opacity layers, one tight and one wide, looks far more natural than a single hard shadow.