Box Shadow Generator
Generate box shadows
Generate box shadows Runs locally in your browser
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
About the
The Box Shadow Generator builds a shadow from offset, blur, spread, colour and opacity, with a live preview and the CSS. The two settings people confuse are blur and spread: blur softens the edge outwards and inwards from the shadow's shape, while spread grows or shrinks the shadow's own size before any blurring happens. Negative spread is what keeps a soft shadow from looking like a halo, which is why the defaults here use a small negative value.
Where people use the
- Building an elevation scale for cards, modals and menus.
- Making a pressed or focused state with an inset shadow.
- Softening a border without adding a real border.
- Checking what a design spec's shadow values actually look like.
How to use the
- 1
Set the offsets
Offset X moves the shadow right, offset Y moves it down. Negative values move it the other way.
- 2
Set blur and spread
Blur softens the edge. Spread expands the shadow before blurring; use a small negative spread for a shadow that sits under the element rather than around it.
- 3
Choose colour and opacity
Pure black at full opacity looks harsh. A low opacity, somewhere between 8 and 20 percent, reads as depth rather than dirt.
- 4
Tick inset if you want an inner shadow
Inset draws the shadow inside the element instead of behind it, which suits pressed states and wells.
- 5
Copy the CSS
The rule includes the rgba colour, so it can be pasted straight into a stylesheet.
Tips and best practices
- Two layered shadows look far better than one heavy one.
- Keep the light source consistent: if one card casts down-right, all of them should.
- Watch for shadows being clipped by a parent with overflow hidden.
Frequently asked questions
What is the difference between blur and spread?
Spread changes the size of the shadow's shape before any softening, positive to grow and negative to shrink. Blur then softens the edge by the given radius. To get a tight shadow under a card you want a small blur and a slightly negative spread.
Why does my shadow look grey and dirty?
Because it is pure black at a high opacity. Use a low alpha, around 0.08 to 0.2, and consider tinting the shadow towards the background hue, which reads much more naturally.
Can I have more than one shadow?
Yes. Separate several shadows with commas in the same declaration; they stack front to back, so the first is on top. Layered shadows are how soft, realistic elevation is built.
Does a box shadow affect layout?
No. Shadows are painted outside the element's box and take up no space, so they can be clipped by a parent with overflow hidden or by a tight container.
Is animating a box shadow expensive?
Yes, relatively. Changing blur or spread forces the browser to repaint the shadow every frame. For smooth motion, animate opacity or transform instead, or cross-fade between two pre-rendered shadows.