A box shadow is drawn from five numbers and a color: how far the shadow moves sideways and down, how soft its edge is, how much it grows or shrinks, and how transparent it is. Move the sliders below, watch the box update in real time, and copy the finished box-shadow declaration straight into your stylesheet.
How it works
The horizontal and vertical offsets push the shadow left/right and up/down; positive values move it right and down, negative values the other way. The blur radius softens the edge — 0 gives a hard outline, larger numbers a diffuse glow. The spread grows the shadow (positive) or pulls it in (negative) before the blur is applied, which is how you make a shadow tighter or wider than the box itself. The color is combined with the opacity slider into an rgba() value, so the alpha channel controls how see-through the shadow is — most real shadows sit well below full strength.
Ticking "inset" moves the shadow inside the element instead of outside, useful for pressed buttons, inset wells and inner borders. You can attach more than one shadow to an element by separating declarations with commas — a common trick for layered, material-style elevation — though this generator produces a single shadow that you can duplicate and edit by hand. box-shadow is supported in every current browser without a prefix; the unprefixed property has worked since Internet Explorer 9.
Practical examples
Subtle card shadow
X 0, Y 4, blur 12, spread 0, black at 12% opacity gives box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12); — a soft lift that reads as a raised card without looking heavy.
Hard offset shadow
X 6, Y 6, blur 0, spread 0, black at 100% opacity gives box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1); — a crisp, un-blurred block used in neo-brutalist and retro designs.
Inset pressed field
Tick inset with X 0, Y 2, blur 4, spread 0, black at 15% gives box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15); — the recessed look of a focused input or a pressed toggle.
Frequently asked questions
What does the spread value do?
Spread changes the size of the shadow before any blur is applied. A positive spread makes the shadow larger than the element on all sides; a negative spread shrinks it inward. It is handy for a shadow that hugs the box tightly or one that extends past it evenly.
What is the difference between an inset and an outer shadow?
By default a box shadow is drawn outside the element, as if it were floating above the page. The inset keyword flips it inside the element, casting the shadow onto the inner surface — the effect you want for pressed buttons, sunken panels and inner glows.
How do I add more than one shadow?
The box-shadow property accepts a comma-separated list, for example box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.08);. Each shadow is drawn on top of the previous one, which is how layered, realistic elevation is built. This tool outputs one shadow, so copy it and paste additional values after a comma.
Why use rgba and an opacity slider instead of a solid color?
Real shadows are semi-transparent, so they tint whatever is behind them rather than painting a flat block. Using rgba() with a low alpha (often 10–25%) keeps the shadow believable and lets the background show through, which a fully opaque color cannot do.
Can the offsets be negative?
Yes. A negative horizontal offset casts the shadow to the left of the element, and a negative vertical offset casts it upward. Combine them to place light as if it were coming from the bottom-right.
What is the difference between box-shadow and filter: drop-shadow?
box-shadow follows the element’s rectangular border box (respecting border-radius), so it always draws a rounded rectangle. filter: drop-shadow() follows the actual painted shape, including transparency in PNGs and irregular SVGs, so it can shadow non-rectangular content. For normal boxes, box-shadow is the right tool and performs better.
Does box-shadow affect layout?
No. Shadows are painted outside the box model and never take up space or push other elements around, unlike a border. That means you can add or resize a shadow without reflowing the page.
Are large blurred shadows bad for performance?
Very large blur radii, many stacked shadows, or shadows that animate every frame can be expensive to repaint, especially on low-end devices. For static UI it is rarely an issue; if you animate a shadow, consider animating opacity on a pseudo-element instead.
How do I recreate Material Design elevation?
Material elevation uses two or three layered shadows at once — a tight, darker shadow close to the element plus a wider, lighter one further out. Build each layer here and combine them in a single comma-separated box-shadow to match a given elevation level.
Why does my rounded box still show a square shadow?
It should not — box-shadow respects border-radius, so a rounded box gets a rounded shadow automatically. A square shadow usually means the radius is set on a child element rather than the one carrying the shadow.
What happens if I set blur to a negative number?
A negative blur radius is invalid CSS and browsers ignore it, so this generator clamps blur to zero. Use a negative spread instead if you want the shadow to be smaller than the box.
Does anything I enter leave my computer?
No. The preview and the generated code are produced entirely in your browser with JavaScript; nothing is uploaded to a server.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview and copy the code.
Developer tools
CSS Minifier
Minify CSS in your browser — strip comments and whitespace to shrink the file, with a before/after size comparison. Nothing is uploaded.
Developer tools
Color Converter
Convert colors between HEX, RGB and HSL, with alpha support and a live swatch. Runs in your browser.
Developer tools
Color Contrast Checker
Check the WCAG contrast ratio between a text and background colour, with AA and AAA pass or fail.
Developer tools
PX to REM Converter
Convert between px and rem for any root font size, with a quick reference table. For CSS work.
Developer tools
JSON Formatter
Beautify, validate or minify JSON in your browser — with clear error messages. Nothing is uploaded.
Developer tools