Micro Tools
Advertisement

Box Shadow Generator

Design the perfect CSS box shadow with sliders and see it live. Copy production-ready code in one click.

Shadow settings

Drag the sliders. The preview and CSS update live.

Live preview

CSS

Advertisement

How the generator works

Each slider maps directly to a box-shadow value: horizontal and vertical offset, blur radius, spread distance, color and opacity. The preview box re-renders on every input event, and the CSS line below it is always in sync, so what you see is exactly what you ship.

Inset vs outset shadows

Outset shadows (the default) lift an element off the page and are the classic card effect. Tick Inset to draw the shadow inside the box instead, which is perfect for pressed buttons, input fields and inner-glow effects.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Box Shadow Generator FAQs

What do blur and spread actually do?
Blur softens the shadow edge (0 is a hard edge), while spread expands or contracts the shadow's size before blurring. A large blur with zero spread gives a soft glow; negative spread shrinks it for tight, crisp shadows.
Why does my shadow look different on a dark background?
Shadows are semi-transparent black by default, so they are nearly invisible on dark surfaces. Switch the color to a light tone or raise the opacity when designing for dark mode.
Can I layer multiple shadows?
Yes in CSS by comma-separating them, but this tool designs one shadow at a time. Generate each layer separately, then join the values with commas in your stylesheet.
Is the generated CSS cross-browser safe?
Yes. box-shadow has been supported unprefixed in every modern browser for over a decade, so the copied code works everywhere without prefixes.
How do I make a glow instead of a shadow?
Set both offsets to 0, spread to 0, and raise the blur. Pick a bright color like cyan or orange at 40-60% opacity for a classic neon glow.
Advertisement