About this tool
CSS `box-shadow` adds a drop shadow to an element — key to creating depth, dimension and a floating "elevated" look. But its parameter order — horizontal offset, vertical offset, blur, spread, color, and whether it is inset — is easy to get wrong by hand. This generator lets you drag sliders to tune each parameter, preview the shadow live, then copy the code.
The `box-shadow` value is, in order: `offset-x` (horizontal, positive moves right), `offset-y` (vertical, positive moves down), `blur-radius` (larger is softer), `spread-radius` (positive grows the shadow), `color` (often with transparency), and an optional `inset` (puts the shadow inside the element). Multiple shadows can be stacked with commas for richer, layered effects. It all generates standard CSS locally in your browser.
How to use
- Use the sliders to set offset-x and offset-y, deciding which direction the shadow falls.
- Adjust the blur radius to make the shadow edge softer or sharper.
- Adjust the spread radius to grow or shrink the whole shadow.
- Pick a shadow color and set its transparency — realistic shadows are usually a semi-transparent black or dark tone.
- Tick `inset` for an inner shadow; add another shadow layer for multi-layer depth.
- Confirm the look in the preview and copy the generated `box-shadow` into your stylesheet.
When to use it
- Add drop shadows to cards, modals and buttons for a floating, layered feel.
- Design Material-Design "elevation" levels (different depths map to different shadows).
- Use an `inset` inner shadow for recessed inputs, toggles or pressed states.
- Stack multiple shadow layers for a soft, realistic ambient drop shadow.
- Dial in just-right shadow values without repeatedly hand-editing CSS and refreshing.
FAQ
What do the box-shadow numbers mean?
In order: offset-x, offset-y, blur-radius, spread-radius, then color. For example `4px 6px 12px 0 rgba(0,0,0,.2)` means 4px right, 6px down, 12px blur, no spread, 20%-opacity black. Blur and spread can be omitted and default to 0.
What does inset do?
Adding the `inset` keyword draws the shadow inside the element instead of outside, creating a recessed/inset look — common for focused inputs, pressed buttons or toggle tracks. Without inset you get the default outer drop shadow.
How do I get a soft, natural shadow?
The trick: use a semi-transparent color (e.g. `rgba(0,0,0,0.15)`) instead of solid black, keep offsets modest, and give it generous blur. Real shadows are often layered — one close and sharp, one far and diffuse — and this tool supports stacking multiple shadows to achieve that.
Does the shadow enlarge the element or affect layout?
No. box-shadow takes no layout space, does not change the element’s box dimensions, and does not push neighboring elements — unlike border. Visually, though, a shadow can overflow its parent, so mind the parent’s overflow setting when needed.