CSS Box Shadow Generator
CSS Box Shadow Generator
Move the sliders and watch the shadow change on the preview box, then copy the CSS.
The CSS Box Shadow Generator creates polished drop shadows with sliders instead of guesswork. Shadows sell depth on cards, buttons, and modals, but the box-shadow syntax packs position, blur, spread, colour, and opacity into one dense line that is genuinely hard to tune blind. This tool gives every value its own control and a live preview box on a neutral stage, so you design the shadow by eye.
Horizontal and vertical offsets move the shadow, blur softens its edge, spread grows or shrinks it, and opacity blends it over any background using a proper rgba colour. Tick Inset to flip the shadow inside the element for pressed or carved effects. Four preset buttons, Soft, Float, Sharp, and Dreamy, offer proven starting points you can then fine-tune.
The output is one standard box-shadow declaration, ready to paste into any stylesheet and supported by every modern browser. Everything runs locally in your browser; nothing is uploaded.
How to use
- Drag the offset, blur, spread, and opacity sliders.
- Pick a shadow colour, and tick Inset if you want an inner shadow.
- Optionally start from one of the four presets.
- Watch the preview box until the depth looks right.
- Click Copy CSS and paste it into your stylesheet.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow's edge, spreading its colour out gradually. Spread changes the shadow's size before blurring: positive values enlarge it, negative values shrink it.
Why use opacity instead of a solid grey?
An rgba shadow with opacity blends naturally over any background colour, so the same shadow looks right on white, grey, or coloured cards. A fixed grey only works on one background.
Can I stack multiple shadows?
CSS allows comma-separated shadow lists. Generate each shadow here one at a time and combine the values in your stylesheet for layered effects.
Is anything uploaded?
No. The generator runs entirely in your browser.