Designing CSS box shadows
A box shadow lifts an element off the page: a card that floats, a menu that sits above the content, a button that looks pressable. Done well, shadows create a clear sense of depth; done badly, they look muddy and dated.
This generator lets you shape a shadow with sliders for horizontal and vertical offset, blur, spread, colour and opacity, stack several shadows into one, and copy the finished box-shadow CSS.
How to use it
- Adjust the X and Y offset to set the light direction; a positive Y puts the shadow below, as if lit from above.
- Raise the blur to soften the edge and use spread to grow or shrink the shadow.
- Pick a colour and lower the opacity until the shadow is subtle.
- Add a second layer for more realism, then copy the CSS.
Example: a soft two-layer card shadow
Layer 1: y 8px, blur 24px, opacity 0.18 Layer 2: y 1px, blur 2px, opacity 0.1
0px 8px 24px 0px rgba(31, 41, 55, 0.18), 0px 1px 2px 0px rgba(31, 41, 55, 0.1)
The large, soft layer gives distance; the small, tight one anchors the card to the surface. Together they look more natural than one shadow.
Reading the box-shadow value
Each shadow is written as offset-x, offset-y, blur radius, spread radius and colour, with an optional inset keyword in front. Several shadows are separated by commas, and the first one is drawn on top. Inset shadows are drawn inside the element, which suits pressed buttons and input fields.
Make shadows believable
Real shadows are rarely pure black. Use a dark version of the background colour, or a dark grey or blue, at low opacity, typically 0.05 to 0.25. Keep the light source consistent across the interface: if one card's shadow falls down, every shadow should. Larger elevation means a larger offset and more blur, which is how design systems such as Material Design express layers.
In dark mode, shadows are hard to see. Many interfaces show elevation there by making raised surfaces slightly lighter instead.
Performance
Box shadows are cheap to draw once, but animating a large blurred shadow can make scrolling stutter on slow devices. To animate a hover lift, keep the shadow on a pseudo-element and animate its opacity, which browsers handle on the graphics card.
Questions
What is the difference between box-shadow and drop-shadow?
box-shadow follows the element's box. The CSS filter drop-shadow() follows the visible shape, including transparent PNGs and SVG icons.
Do shadows work in all browsers?
Yes. box-shadow with multiple layers has worked in every major browser for more than a decade.
Is anything uploaded?
No. The CSS is generated in your browser.