CSS Box Shadow Generator
Tune offset, blur, spread, color and opacity, then copy ready-to-use box-shadow CSS.
Shadow preview
CSS code
box-shadow: 0px 18px 36px -8px rgba(17, 24, 39, 0.18);
This tool runs entirely in your browser. Your input is never uploaded.
How to use
- 1Drag the sliders to set horizontal and vertical offsets
- 2Adjust blur, spread, color and opacity, and toggle inset if needed
- 3Check the preview, then copy the CSS
FAQ
What does spread do?
Spread grows or shrinks the shadow. Negative values create a tighter shadow and often pair well with a large blur.
How do I make an inset shadow?
Turn on inset. The shadow is drawn inside the element, which is useful for sunken cards and inputs.
Why does the preview differ slightly from my page?
The preview has fixed rounded corners and a background. Real shadows also depend on the element's radius, background and stacking context.