A well-crafted box shadow is what makes cards, buttons and modals feel like they float above the page; a bad one looks like a grey smudge from 2005. Tuning shadow values by typing numbers and refreshing is painfully slow. Our free box shadow generator gives you sliders for horizontal and vertical offset, blur, spread and shadow colour with transparency, plus an inset option and ready-made presets from subtle to dramatic. Design on a live card preview, then copy the exact CSS declaration.
Quick Answer: Drag the offset, blur and spread sliders, pick a shadow colour and opacity, optionally add inset, and copy the box-shadow CSS. Presets give you proven starting points in one click.
Free Online Tool
CSS Box Shadow Generator
Sliders, presets and a live card preview.
How to Use the CSS Box Shadow Generator
- Start from a preset that matches your goal: subtle for cards, medium for dropdowns, strong for modals.
- Drag the horizontal and vertical offsets to position the shadow as if light falls from above (positive Y is most natural).
- Increase blur for softness; increase spread to make the shadow physically larger before it blurs.
- Set the shadow colour and lower its opacity for realism; pure black at full opacity almost never looks right.
- Copy the CSS and apply it to your element. Toggle inset if the shadow should appear inside the box, like a pressed effect.
Key Features
- Full control: X and Y offsets, blur radius, spread radius, colour and opacity.
- Inset shadow toggle for inner-glow and pressed effects.
- Four curated presets: subtle, medium, strong and soft-glow.
- Live preview on a realistic card at actual scale.
- Generates the complete box-shadow declaration, ready to paste.
Best Practices and Tips
- Mimic one light source across your whole site: keep the same offset direction and colour family for every shadow.
- Layer two shadows for realism, a tight dark one for contact and a large soft one for ambient light, as high-end design systems do.
- Reduce shadow intensity on dark backgrounds; shadows are barely visible there, so use a subtle border or glow instead.
- Keep blur roughly proportional to elevation: elements that float higher (modals) deserve larger, softer shadows than resting cards.
- Screenshot your page at 100 percent zoom when judging shadows: browser zoom exaggerates blur and spread, and shadows that look perfect at 150 percent can look dirty at real size.
Common Mistakes to Avoid
- Using the default harsh black shadow at 100 percent opacity, which looks dirty on coloured backgrounds.
- Giving every element a different shadow direction, breaking the illusion of a single light source.
- Making shadows so large and blurry that neighbouring elements look foggy and the layout loses definition.
Frequently Asked Questions
What does each box-shadow value mean?
The syntax is offset-x, offset-y, blur-radius, spread-radius, then colour. Offsets move the shadow, blur softens its edge, spread grows or shrinks the shadow shape before blurring, and the colour usually includes transparency via rgba.
What is an inset shadow?
An inset shadow is drawn inside the element’s border instead of outside it. It creates effects like inner depth, pressed buttons and subtle top highlights on inputs.
Why do my shadows look harsh compared with modern sites?
Modern design uses low-opacity shadows (often 5 to 25 percent black) with generous blur, frequently layered. If your shadow colour is solid black with a small blur, it will look heavy; soften both settings.
Can an element have multiple shadows?
Yes, separate multiple shadows with commas in one declaration. This generator produces one polished shadow; you can run it twice and combine the two results manually for a layered effect.
Do box shadows hurt performance?
Small shadows are cheap, but enormous blur radii over large areas can strain low-end GPUs during scrolling and animations. Keep blurs reasonable and avoid animating shadow size continuously.
Why does my shadow disappear on a dark background?
A black shadow on a near-black surface has almost no contrast to reveal it. On dark designs, define depth with a slightly lighter border, a soft coloured glow (try the Soft Glow preset with your accent colour), or a lighter surface for the raised element instead.
Related Tools
- CSS Gradient Generator – design linear and radial CSS gradients and copy the code
- Hex / RGB Color Converter – convert colours between HEX, RGB and HSL with a visual picker
- CSS Minifier – compress CSS by removing comments and whitespace safely
- Favicon Generator – create a favicon from letters or a logo, with install code included