Box Shadow Generator
Visually dial box-shadow — offset X/Y, blur, spread, color and inset, with multiple layers, live preview and one-click CSS copy.
>_ USAGE GUIDE
Dial box-shadow visually with sliders for horizontal and vertical offset, blur radius, spread radius and color, plus an inset toggle for inner shadows, with a live preview. It supports multiple layers, so you can stack one shadow on another and copy the whole CSS in one click.
Layered shadows are the key to natural-looking cards: instead of one large dark shadow, stack two or three smaller ones with their own blur and opacity to mimic a soft, realistic falloff. inset draws the shadow inside the element, and its offsets run the opposite way from intuition — a positive offset presses the inner shadow in from top-left toward bottom-right. Prefer semi-transparent rgba colors so the shadow blends softly on both light and dark backgrounds.
- Choose outer or inset: decide between an outer shadow and an
insetone - Drag the sliders: tune the X / Y offsets, blur and spread
- Pick a color: set the shadow color, ideally a transparent
rgba - Add a layer if needed: stack a second or third shadow with the add button
- Copy the CSS: grab the whole
box-shadowinto your code
>_ FAQ
Q1 · How do I write multiple layered shadows?
Separate layers with commas, earlier ones on top: box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.12);. The common recipe is a small near layer for edge detail plus a larger far layer for depth, which reads more like real lighting than a single shadow.
Q2 · Why does an inset shadow look reversed?
Because inset draws the shadow inside the element, as if light came from the opposite direction. For an outer shadow a positive offset casts the shadow to the bottom-right; for inset a positive offset presses a dark edge in from the top-left. Flipping the offset signs when tuning usually fixes it.
Q3 · What is the difference between blur and spread?
blur controls how soft the shadow edge is — a larger value feathers it more. spread grows or shrinks the whole shadow before blurring — a positive value enlarges it and a negative one shrinks it. Use blur to make the shadow softer and spread to make it larger.
Q4 · What color format should I use?
Prefer semi-transparent rgba, for example rgba(0, 0, 0, 0.15). A solid opaque shadow tends to look harsh, while transparency lets it blend with the background; use a lower black opacity on dark backgrounds and raise it slightly on light ones.
Q5 · The result does not match my design file — what now?
First check how many layers the design uses and each layer's offset, blur, spread, color and opacity, then match them one by one. Design tools often align offsets with CSS but name spread and blur differently, so a slight mismatch is usually those two — or a hidden second layer you missed.