CSS Box Shadow Generator
Dial in horizontal offset, vertical offset, blur, spread, color, opacity, and inset with live sliders. Copy the CSS box-shadow declaration. Everything runs in your browser.
About the CSS Box Shadow Generator
The CSS Box Shadow Generator builds a box-shadow declaration from sliders for horizontal offset, vertical offset, blur radius, and spread radius, plus a color picker, an opacity control, and an inset toggle. A live preview box shows the result as you adjust each value, and the exact CSS appears in a copy-ready box. It is built for web developers, WordPress and Divi users, and designers who want a precise shadow without writing the syntax by hand. Everything runs in your browser, so nothing is uploaded.
How it works
- Drag the horizontal, vertical, blur, and spread sliders, or type exact pixel values in the number boxes next to each one.
- Pick a shadow color, set its opacity with the opacity slider, and turn on the inset toggle if you want the shadow drawn inside the element.
- Watch the preview box update live, and switch the backdrop to test the shadow on light, white, dark, and gradient backgrounds.
- Click Copy to grab the box-shadow declaration and paste it into your stylesheet.
Features
- Sliders paired with number inputs for horizontal offset, vertical offset, blur radius, and spread radius.
- Color picker with a hex field and a separate opacity slider, combined into an 8-digit hex value.
- Inset toggle to switch between an outer shadow and an inner shadow.
- Live preview box with four backdrop options (light, white, dark, gradient) to check contrast.
- Copy-ready CSS output in a monospace box with a one-click Copy button.
Frequently asked questions
Is my data sent anywhere?
No. The preview and the CSS output are generated entirely in your browser. Nothing is uploaded or logged.
What does each value control?
Horizontal offset moves the shadow right (positive) or left (negative). Vertical offset moves it down (positive) or up (negative). Blur radius softens the edge, a higher value is more diffuse. Spread radius grows (positive) or shrinks (negative) the shadow size.
What does the inset toggle do?
Inset draws the shadow inside the element instead of outside it, which gives a pressed or recessed look. With the toggle off, the shadow sits outside the box.
How is the opacity applied to the color?
The opacity percentage is converted to a two-digit alpha and appended to the six-digit hex color, producing an 8-digit hex value like #0D1117CC. This is supported in all current browsers.
Can I add more than one shadow?
This tool generates a single shadow. To stack shadows, generate each one here and join them in your CSS with commas, for example box-shadow: 0 1px 2px #00000014, 0 8px 24px #0000001f;.