CSS box shadow generator
Build one shadow or stack several, watch it update live, and copy the exact CSS.
Runs entirely in your browser. Nothing is sent anywhere.
How to use the box shadow generator
- Start from a preset if you want a sensible baseline, or adjust the default layer directly. The preview updates as you move any slider.
- Set the four numbers on each layer. Horizontal and vertical offset move the shadow, blur softens its edge, and spread grows or shrinks it before the blur is applied.
- Add more layers for realistic depth. Real objects cast a tight dark shadow close to the surface and a wide soft one further out, and stacking two shadows reproduces that far better than one ever can.
- Tick inset on a layer to push the shadow inside the box instead of outside, then copy the finished CSS.
What you can use it for
Card interfaces live or die on their shadows. A card with no shadow and no border floats without anchoring; a card with a heavy black shadow looks like 2012. The current convention is a very soft, low-opacity shadow offset slightly downward, which reads as depth without announcing itself.
Hover states are where shadows do their most useful work. Increasing the blur and offset slightly when the cursor enters an element gives immediate physical feedback that it is interactive, and it is cheaper to render than most alternatives.
Inset shadows create pressed and recessed effects. A form input with a subtle inset shadow reads as a well you type into rather than a raised block, and a button with an inset shadow on its active state feels like it depresses when clicked.
Layered shadows are the difference between flat and convincing. Design systems from Material to Tailwind all define their elevation levels as two or three stacked shadows rather than one, precisely because a single shadow cannot be both tight enough to anchor and soft enough to look natural.
Things to know
The property takes its values in a fixed order: horizontal offset, vertical offset, blur radius, spread radius, colour. Only the first two are required. Getting the order wrong is the most common reason a pasted shadow does nothing visible.
Multiple shadows are separated by commas, and the first one in the list is painted on top. This matters when layers overlap — reorder them if the wrong one is dominating.
Use a translucent colour rather than a solid grey. A shadow at rgba(0,0,0,0.08) sits correctly on any background because it darkens whatever is beneath it. A solid grey shadow looks wrong the moment the background changes, and looks especially wrong in dark mode.
Spread is the least understood value and the most useful once you get it. Positive spread expands the shadow outward before blurring, which is how you get a soft glow. Negative spread pulls it in, which is how you get a tight shadow directly under an element without it peeking out at the sides.
Frequently asked questions
Blur softens the shadow's edge over that many pixels, fading it out gradually. Spread changes the size of the shadow shape itself before any blurring happens, growing or shrinking it uniformly. A shadow with high blur and zero spread is a soft cloud; one with zero blur and positive spread is a hard-edged outline.
Use a vertical or horizontal offset larger than the blur radius, and a negative spread to pull the other edges back in. For example 0 8px 8px -6px keeps the shadow under the element and stops it appearing at the sides.
No. Shadows are painted outside the element's box and take up no space, so adding one never pushes neighbouring elements around. This is the opposite of border, which does affect layout, and it is why shadows are safe to add on hover.
A handful are fine. Very large blur radii on many elements, especially while scrolling or animating, can cost real paint time on lower-end phones. If a page feels sluggish, animating transform and opacity instead of the shadow itself is the standard fix.
box-shadow follows the rectangular box and its border radius. The filter: drop-shadow() function follows the actual shape of the content, including transparency in a PNG or the outline of an SVG icon. Use drop-shadow when you need a shadow around an irregular shape.