Box-Shadow Generator

What this tool does

The Box-Shadow Generator lets you design CSS box-shadows visually and copies the finished declaration for you. Each shadow is a layer with six controls — offset X, offset Y, blur radius, spread radius, colour and an inset toggle — and you can stack as many layers as you like. A live preview shows a sample box with the exact shadow applied, updating the instant you move a slider. The output is a ready-to-paste box-shadow declaration. All of the rendering and maths happens locally in your browser.

Use cases

Shadows are the quietest but most powerful depth cue in interface design. A card that floats above the page needs a soft, wide shadow; a button that should feel clickable benefits from a tighter one that deepens on hover. Inset shadows turn a plain rectangle into a recessed input well or a pressed-button state. Designers assembling a component library can define a small set of elevation tokens — resting, raised and overlay — and copy each one as reusable CSS. Developers reproducing a mock-up can dial in the precise offsets a designer specified instead of guessing. Hobbyists building landing pages, dashboards or game menus get a fast way to make flat boxes feel tangible without any image assets.

Depth also communicates hierarchy. A modal or dropdown sits visually closer to the viewer than the page behind it, and a wider, darker shadow tells the eye exactly that. Toast notifications, popovers and tooltips all use shadow to read as temporary layers floating over content. On branding work, a coloured shadow tinted toward an accent hue gives product shots and feature tiles a distinctive glow that a plain grey shadow never achieves.

A worked example

Say you want a card that looks gently raised. Start the first layer with a small footprint: offset X 0, offset Y 1, blur 2, spread 0, in a dark colour at low opacity. Add a second layer for the soft ambient halo: offset X 0, offset Y 8, blur 24, spread -4, in the same colour but even more transparent. The tight layer anchors the card to the surface while the wide, negatively-spread layer fades out naturally instead of bleeding into neighbours. Copy the combined declaration and you have a believable resting elevation you can reuse anywhere.

How to use it

1. Adjust the four sliders for the first layer — offset X, offset Y, blur radius and spread radius — and watch the preview respond.
2. Set the shadow colour with the native colour picker or by typing a hex value into the text field.
3. Toggle inset if you want the shadow drawn inside the element instead of outside it.
4. Click Add layer to stack another shadow, then tune it the same way. Use Remove to delete a layer; at least one always remains.
5. When the preview looks right, press Copy CSS to copy the complete box-shadow declaration, or use the inline copy icon on the code line.
6. Press Reset to return to the default single-layer shadow.

Tips

Realistic shadows are soft and never pure black — pick a dark colour and give it generous blur. The most convincing depth comes from two layers: a small, slightly darker shadow close to the element plus a larger, softer one spread wider. A negative spread on the wide layer keeps it from bleeding too far. For hover states, increase offset Y and blur slightly so the element appears to lift. Keep elevation consistent across a project by reusing the same handful of shadow recipes rather than inventing a new one per component. Watch the blur radius on large or numerous elements: very wide blur values are more expensive to paint, and a long list of heavily blurred shadows on a scrolling page can cause visible jank. If you animate a shadow, transition a second pre-rendered layer’s opacity or use a pseudo-element rather than animating the blur itself, since changing blur forces the browser to repaint on every frame.

Related techniques

Box-shadows pair naturally with the Border-Radius Generator, since rounded corners and shadows together define a card’s silhouette. The Gradient Generator gives the surface itself depth, and the Text-Shadow Generator handles legibility of any heading sitting on top. If a shadow uses a tinted colour, the Color Converter helps you express it as RGB or HSL where needed, and a contrast checker confirms surrounding text stays readable. For interactive depth, combine the copied declaration with a CSS transition on box-shadow so elements animate smoothly between elevation states.