Box Shadow Generator
Box Shadow Generator — Adjust shadow offsets, blur, spread, color and inset, then preview and copy the CSS box-shadow. Processing runs in your browser.
Box Shadow Generator generates CSS from the controls shown below. Adjust shadow offsets, blur, spread, color and inset, then preview and copy the CSS box-shadow. Review the output before adding it to your page.
Box Shadow Generator is a free CSS Tools utility that runs entirely in your browser — nothing you enter is uploaded.
How to use Box Shadow Generator
- Set Offset X and Offset Y to position the shadow.
- Adjust Blur, Spread and Color; enable Inset for an inner shadow.
- Review the box preview and the generated box-shadow declaration.
- Choose Copy and add the declaration to the CSS rule for your element.
About this tool
This generator creates one box-shadow from the controls. Offsets, blur and spread use pixels; the Inset checkbox changes the shadow from outside the box to inside it.
The tool generates CSS locally from your chosen settings. It does not parse or modify a pasted stylesheet. Once the page and its scripts have loaded, generation can run without a network connection.
Frequently asked questions
What does Box Shadow Generator do?
Adjust shadow offsets, blur, spread, color and inset, then preview and copy the CSS box-shadow. The controls update the preview and CSS automatically.
Is Box Shadow Generator free to use?
The tool is free to use and requires no account or installation. Controls are limited to the ranges and presets shown.
Where are my settings processed?
The tool processes your selected settings in your browser; it does not send those settings to a server for generation. The site privacy and cookie pages describe its separate advertising and analytics services.
How do I apply the generated CSS?
Place the generated box-shadow declaration inside the selector for the element you want to style.
Does Box Shadow Generator work on mobile?
The controls work in modern desktop and mobile browsers with JavaScript enabled. Test the copied CSS in the browsers and layout you intend to support.