CSS Box-Shadow Generator
Build CSS box-shadows visually. Live preview, copy the CSS. 100% in your browser.
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.25);
About CSS Box-Shadow Generator
The CSS Box-Shadow Generator helps you design shadows without memorizing the syntax. Set the horizontal and vertical offset, blur radius, spread, and shadow color, then toggle the inset option for inner shadows. A live preview shows the result on a sample element, and the box-shadow declaration is shown below for you to copy.
The tool works entirely on your device, so nothing you enter leaves the browser. Box shadows are useful for lifting buttons off the page, outlining cards, building layered material-style depth, or adding focus rings, and you can fine-tune the copied value directly in your CSS afterward.
Frequently asked questions
- What does the spread value do?
- Spread grows or shrinks the shadow before the blur is applied; a positive value makes the shadow larger and a negative value makes it smaller.
- How do I create an inner shadow?
- Enable the inset option, which places the shadow inside the element's border instead of behind it.
- Can an element have multiple shadows?
- Yes. The box-shadow property accepts a comma-separated list, so you can layer several shadows on one element.