Generate CSS box-shadow code visually with a live preview — offset, blur, spread, colour, and inset.
Developers crafting CSS shadows for cards, buttons, and UI elements.
Adjust the sliders
Set the horizontal and vertical offset, blur, and spread while watching the live preview.
Set colour and strength
Pick the shadow colour and how strong (opaque) it appears.
Copy the CSS
Toggle inset if you want a recessed effect, then copy the ready-to-use box-shadow code.
A good shadow is what makes a card lift off the page or a button feel pressable, but CSS box-shadow packs five things into one property — horizontal and vertical offset, blur, spread, colour, and an optional inset flag — and tuning them blind by editing numbers and refreshing is slow and frustrating. Small changes to blur and spread make a big visual difference, so seeing them live is the only sane way to dial in the exact depth and softness you want. This generator gives you sliders for every value with a real-time preview, then hands you ready-to-use CSS. Adjust the offsets, blur, and spread, set the shadow colour and strength, toggle inset for a recessed look, and copy the result. It runs entirely in your browser. Because box-shadow accepts multiple comma-separated shadows, you can also stack several generated values for layered, more realistic depth.
Cards & panels
Give cards a subtle lift off the background with a soft, natural shadow.
Buttons
Add depth, hover lift, or pressed (inset) effects to buttons.
Design systems
Generate a consistent set of elevation shadows for a component library.
Inputs & wells
Use inset shadows to make fields and wells look recessed.
Prototyping
Experiment with depth quickly before settling on a value in your stylesheet.
They move the shadow horizontally and vertically. A small positive vertical offset with some blur gives the natural "light from above" look.
Spread grows or shrinks the shadow before blur is applied — positive makes it larger, negative pulls it tighter.
Inset draws the shadow inside the element rather than outside, useful for pressed buttons and recessed inputs.
Use a small offset, a larger blur, little or no spread, and a low-opacity colour — harsh shadows usually come from too little blur or too much opacity.
Yes. box-shadow accepts comma-separated values, so layer several (e.g. a tight one plus a soft wide one) for more realistic depth.
No. Shadows are painted outside the box model and do not take up space or push other elements.
No. Everything runs in your browser.
Yes — generate unlimited box-shadow code for free, with no sign-up.