CSS Box Shadow Generator
Design box-shadow effects visually with live preview. Multi-layer, presets, copy CSS instantly.
Syntax: box-shadow: offsetX offsetY blur spread color;
Offset X/Y — Horizontal and vertical displacement of the shadow. Positive values go right/down. Negative values go left/up.
Blur — How blurry the shadow is. 0 = sharp edge, higher = softer.
Spread — Expand or shrink the shadow. Positive = larger, negative = smaller than the element.
Inset — Moves the shadow inside the element, creating an inner-shadow effect.
Multiple shadows — Separate with commas. Rendered front-to-back (first = on top).
Tip: Combine a tight, dark shadow with a large, light one for a realistic layered depth effect.
About CSS Box Shadow Generator
CSS Box Shadow Generator lets you visually design box-shadow effects and instantly copy the CSS code. Adjust horizontal and vertical offset, blur radius, spread radius, color, opacity, and inset mode with live preview. Add multiple shadow layers for complex effects, choose from ready-made presets, and copy the final CSS with one click. 100% browser-based — no data leaves your device.