CSS Box Shadow Generator
Build CSS box-shadow code visually: sliders for offset, blur, spread, color with opacity, inset mode and up to four layers with a live preview.
Result
A box-shadow declaration has six moving parts — X and Y offset, blur, spread, color and the optional inset keyword — and the only way to get them right is to see them. This generator puts every part on a slider and renders the result on a preview card as you drag, so the CSS line at the bottom is always exactly what you are looking at.
Real-world shadows are rarely a single layer. The layer list lets you stack up to four shadows in one declaration: a tight dark line for edge definition plus a wide soft wash for elevation, or the light-and-dark pair that defines neumorphism. Select a layer to edit it, remove the ones you do not need, and the combined box-shadow value updates live.
Shadows read very differently on dark interfaces, where a black shadow on a near-black page simply disappears. The preview background toggle switches the backdrop between light and dark so you can check both themes before shipping. Preset pages cover the variants people actually search for: a soft elevation shadow, an inset well, the two-layer neumorphism recipe and a subtle card shadow.
Like every tool on this site, the generator is free and runs entirely in your browser: no upload, no account, and it keeps working offline once the page has loaded.