Generate CSS box-shadow code with a live preview. Set offset, blur, spread, color and inset with sliders, then copy the ready-to-paste declaration.
Runs entirely in your browser — your data never leaves your device.
How to use CSS Box Shadow Generator
What it does & when you need it
A CSS box-shadow packs four lengths and a color into one terse line, and
tuning it by editing numbers in a stylesheet and alt-tabbing to the browser is
slow. This tool gives you a slider for each value and a live box that repaints as
you drag, so you dial in the shadow by eye and copy the finished declaration.
Everything runs in your browser — nothing about your design is uploaded.
Reach for it when you are building a card, a dropdown, a modal, or a button and
want a shadow that looks intentional rather than the default grey smear.
How to use
Drag the Offset X and Offset Y sliders to push the shadow sideways and
down (negative values move it up and left).
Set Blur to soften the edge and Spread to grow or shrink the shadow.
Pick a Color — use the swatch for a solid hex or type an rgba() value
for a translucent shadow. Toggle Inset for an inner shadow.
Copy the box-shadow: …; line, or press Ctrl/Cmd + Enter.
Things worth knowing
The order is offset-x, offset-y, blur, spread, color. Positive offsets sit
the shadow to the right and below the box; blur is how far the edge fades; spread
inflates the shadow before it is blurred, so a negative spread pulls it in
tighter than the box.
Realistic shadows are translucent, not black. A solid #000 shadow looks
like a sticker. Layering a soft, low-opacity shadow such as rgba(0,0,0,0.2)
reads as real depth. Because the color is a full CSS color, you can copy it
straight from the color converter or reuse a palette
value.
Blur can be zero, but never negative. A zero blur gives a crisp, hard-edged
shadow — great for a retro or neobrutalist look — while a negative blur is
invalid CSS, so this tool clamps it. Pair a shadow with the
gradient generator, and tidy the result with the
CSS formatter.
Examples
Soft card shadow
2px 4px 10px 0px rgba(0,0,0,0.3)
A gentle drop shadow that lifts a card off the page — small offset, moderate blur, translucent black.
Inset pressed look
inset 0px 2px 6px 1px rgba(0,0,0,0.35)
The inset keyword draws the shadow inside the box for a recessed, pressed-button effect.
Hard offset (zero blur)
5px 5px 0px 0px #000000
A zero blur radius produces a crisp, hard-edged shadow for a retro or neobrutalist style.
Frequently asked questions
What do the four length values in box-shadow mean?+
In order they are the horizontal offset, the vertical offset, the blur radius, and the spread radius. Positive offsets push the shadow right and down; the blur softens the edge; the spread grows (positive) or shrinks (negative) the shadow before it is blurred. So box-shadow: 2px 4px 10px 0px rgba(0,0,0,0.3) is a soft shadow 2px right, 4px down.
How do I make an inner shadow instead of a drop shadow?+
Turn on the Inset option. It adds the inset keyword to the front of the value, which draws the shadow inside the box rather than behind it — useful for pressed buttons, inputs, and inset wells. You can even stack an inset and an outer shadow by comma-separating two values.
Why can the blur be zero but not negative?+
A blur radius of 0 gives a hard-edged shadow with no softening, which is valid and handy for a solid offset. A negative blur radius, however, is invalid CSS and browsers ignore the whole declaration, so this tool clamps blur to a minimum of 0 while still allowing a negative spread.
How do I control the shadow’s opacity?+
Use a color with an alpha channel — an rgba() value like rgba(0,0,0,0.3), an 8-digit hex like #00000055, or hsla(). Most realistic shadows are a translucent black around 15–35% opacity rather than a solid color, which is why the default here is rgba(0, 0, 0, 0.2).
Does this tool send my design anywhere?+
No. The CSS is generated entirely in your browser as you move the sliders, with no network request, so it works offline and nothing about your design leaves your machine.