Box Shadow Generator
Design CSS box shadows
Loading tool…
About the Box Shadow Generator
Design CSS box shadows with live preview sliders for X/Y offset, blur, spread, color, and opacity — including inset shadows. Stop guessing rgba values: tune the shadow visually and copy a clean box-shadow declaration ready for production.
How to use
- 1Drag the offset, blur, and spread sliders.
- 2Pick a shadow color and opacity.
- 3Toggle inset if needed and copy the CSS.
Related Colors & Design tools
Box Shadow Generator is part of DevKit — 100 free, privacy-first tools for developers, students, and everyone, built by Minhazul Ashim. Everything runs in your browser; your data never leaves your machine.