About the CSS Box Shadow Generator
What is a box-shadow generator?
The box-shadow property takes up to five values in a row, and none of them are labeled. You get an X offset, a Y offset, a blur radius, an optional spread, and a color, and if you put the spread where the blur should be you get something that looks wrong without telling you why. A generator gives each value its own slider and shows the result immediately, so you tune the shadow by eye instead of guessing numbers.
Here's the thing most generators leave out. A convincing shadow is rarely one shadow. Look closely at a card in almost any well-made interface and it's two or three layered on top of each other, a tight dark one that reads as contact with the surface and a wider soft one that reads as height. This tool stacks up to six layers, so you can build that instead of settling for the single flat blur everyone else gives you.
How to Use This Tool
- Start from a preset. Subtle, Card, Raised and Floating cover most real cases. Pressed in and Focus ring cover the rest.
- Tune the layer. Down moves the shadow, Blur softens the edge, Spread grows or shrinks it before it blurs, and Opacity decides how heavy it feels.
- Add layers. Click Add another layer to stack a second or third. Keep the tightest one first, since browsers paint the first shadow on top.
- Check it on a real background. The four swatches above the preview switch between white, gray and dark. A shadow that looks good on white often disappears on dark.
- Copy it. Plain CSS, an SCSS mixin, a Tailwind arbitrary class, or a JavaScript style object for React or styled-components.
Common Use Cases
Shadows do a specific job, which is telling someone how far an element sits above the page. These are the jobs they do most.
- Cards and panels: A two-layer shadow at low opacity lifts a card off the background without the heavy 2010 drop-shadow look.
- Buttons that respond: A small shadow at rest and a larger one on hover reads as the button rising toward the cursor.
- Focus rings: Zero offset, zero blur, a few pixels of spread in your brand color gives you a ring that follows the border radius, which
outline historically did not.
- Inset wells: Turn on inset for input fields and progress tracks that should look recessed rather than raised.
- Hard offset shadows: Zero blur with a solid color is the flat, graphic look used across neo-brutalist designs.
Working on the rest of the box? The CSS Border Radius Generator shapes the corners, the CSS Gradient Border Generator handles the edge, and the CSS Neumorphism Generator builds the soft double-shadow look from the same property. Or browse all our free developer tools.
Frequently Asked Questions
What do the four numbers in box-shadow mean?
Reading left to right, they are how far across, how far down, how much blur, and how much spread. Offsets can be negative, which moves the shadow left or up. Blur softens the edge outward from the shape. Spread is the one people miss. It grows or shrinks the shadow before any blurring happens, so a positive spread with zero blur gives you a solid band, which is how focus rings are made.
Why does my shadow look muddy or fake?
Usually it's one layer doing too much. A single 20px blur at 40% opacity spreads a lot of gray evenly and reads as fog rather than light. Two layers fix it: a small tight one at low opacity for the contact edge, and a larger soft one at even lower opacity for the height. The other common cause is pure black. Shadows in the real world pick up the color around them, so a very dark blue or purple usually sits better than #000.
What does inset actually change?
It flips the shadow inside the element's box instead of outside it. The same offsets and blur apply, they just paint inward from the border, which makes the element look recessed. It's what you want for text inputs, toggle tracks and progress bars. You can mix inset and outer layers on the same element.
Do I still need vendor prefixes?
No. box-shadow has been unprefixed in every browser for well over a decade, so -webkit-box-shadow and -moz-box-shadow are dead weight in new code. You'll still see them in older stylesheets and in code copied from older tutorials, which is why plenty of generators still emit them. This one doesn't.
Does a box shadow affect layout?
No, and that's the useful part. Shadows are painted outside the box model, so they never push neighboring elements around or add to the element's width the way a border does. The tradeoff is that a large shadow can overflow a parent that has overflow: hidden and get clipped, which is the usual reason a shadow you can see in this preview vanishes in your own page.
How many layers is too many?
Three is plenty for almost anything, and the tool stops at six. Each layer is another paint the browser does on every frame the element moves, so long stacks on an animated element are a real cost on low-end phones. If you're animating a shadow on hover, animating opacity on a pseudo-element that holds the bigger shadow is cheaper than animating box-shadow itself.
Can I use this shadow in Tailwind or React?
Yes, pick the format above the code. Tailwind gives you an arbitrary-value class you can drop straight onto an element, and the JS style object works in React inline styles, styled-components and most CSS-in-JS libraries. The SCSS option wraps the same declaration in a mixin so you can include it in several places and change it once.