Box Shadow Generator
Stack multiple shadow layers, adjust offset, blur, spread, colour and inset, and copy the exact CSS behind the preview.
About the Box Shadow Generator
Shadow is how an interface communicates height. A card that sits slightly above the page, a dropdown floating over content, a button that presses down when clicked — all of it is conveyed by shadow. Every serious design system defines an elevation scale for this reason, and the shadows in those scales are almost never a single layer.
That is the detail that separates a convincing shadow from a muddy one. Real light produces a tight, dark contact shadow immediately beneath an object and a wide, faint ambient shadow spreading further out. A single CSS shadow can only approximate one of those. Stacking two or three — a small offset at low blur, plus a larger offset at high blur and lower opacity — produces depth that reads as real. This generator supports as many layers as you want, each independently controlled.
The four numbers in a box-shadow are worth understanding while you drag them. Horizontal and vertical offset move the shadow; for a light source above, keep horizontal at zero and vertical positive. Blur softens the edge and is usually the largest value. Spread grows or shrinks the shadow before blurring, and a negative spread is the trick that keeps a large soft shadow from bleeding out sideways.
How to use it
- Adjust the base layerSet horizontal and vertical offset, blur radius, spread and colour with sliders and see the change immediately.
- Add more layersStack a second and third shadow to build realistic depth rather than a flat grey halo.
- Try insetSwitch any layer to inset for pressed buttons, input fields and inner-glow effects.
- Tune the colour and opacityShadows built from a dark tint of the background colour look far better than pure black.
- Check both themesToggle the site's dark mode to confirm the shadow still reads on a dark surface.
- Copy the CSSThe complete box-shadow declaration, with every layer comma-separated in the correct order.
Features
- Multiple layersStack unlimited shadows, reorder them and remove any layer independently.
- Full parameter controlHorizontal offset, vertical offset, blur, spread, colour and alpha for every layer.
- Inset supportToggle any layer to an inner shadow for pressed and recessed effects.
- Live preview surfaceA realistic card preview with adjustable background so you can judge the shadow in context.
- Elevation presetsReady-made subtle, medium, large and floating shadows to start from.
- Clean CSS outputCorrectly ordered, comma-separated declaration ready to paste.
Who uses this tool
- UI designersDefine a consistent elevation scale and copy each level straight into a design system.
- Front-end developersMatch a shadow from a design file without opening the design file.
- Theme customisersAdd depth to cards and buttons in a WordPress or Shopify theme through custom CSS.
- LearnersSee exactly what spread does, which is the parameter nobody understands from documentation alone.
Tips worth knowing
- Use a dark tint of your background colour rather than pure black. Black shadows look grey and dead over coloured surfaces.
- Keep horizontal offset at zero for most interfaces — a consistent overhead light source is what makes an elevation scale feel coherent.
- Negative spread on a large blurred layer keeps the shadow underneath the element instead of leaking out to the sides.
Frequently asked questions
What do the four box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius and spread radius. Offsets move the shadow, blur softens its edge, and spread expands or contracts it before the blur is applied. A fifth value, the colour, follows them, and the keyword inset can precede the whole thing.
How do I create a realistic shadow?
Layer two or three. Use a small vertical offset with a small blur for the contact shadow, then a larger offset with a much larger blur and lower opacity for the ambient shadow. Real objects cast both, which is why single-layer shadows read as flat.
What is the difference between blur and spread?
Blur softens the shadow's edge without changing its size much. Spread changes the shadow's size before blurring — positive makes it bigger than the element, negative makes it smaller. Negative spread is how you keep a soft shadow from bleeding sideways.
How do I make an inner shadow?
Add the inset keyword to the layer. The shadow is then drawn inside the element's border box, which is how pressed buttons, recessed panels and input field depth are made.
Do box shadows hurt performance?
Large blur radii on many elements can cost paint time, especially on low-end mobile devices. A handful of shadowed cards is completely fine; hundreds of heavily blurred elements, or animating a shadow's blur, is where problems appear. Animating opacity on a shadow pseudo-element is the usual workaround.
How should shadows change in dark mode?
Dark shadows barely register on dark surfaces. The usual approach is to reduce shadow opacity and lean on a lighter surface colour or a subtle border to convey elevation instead. Toggle this site's theme to see the difference on the preview.