How to use the box shadow generator
- Use the sliders to set the x offset, y offset, blur, spread and opacity of the shadow.
- Choose the shadow colour, and turn on inset if you want the shadow inside the box.
- Add up to 3 layered shadows to build softer, more natural depth.
- Check the result on the live preview card, then copy the CSS.
The box-shadow syntax
Each shadow is written in this order: an optional inset keyword, the x and y offsets, the blur radius, the spread radius, and the colour. Only the two offsets are required. MDN’s box-shadow reference lists every value and its browser support.
| Value | What it does | Negative allowed? |
|---|---|---|
| x offset | Moves the shadow right (positive) or left (negative). | Yes |
| y offset | Moves the shadow down (positive) or up (negative). | Yes |
| blur | How soft the edge is. 0 gives a sharp edge. | No |
| spread | Grows (positive) or shrinks (negative) the shadow before blurring. | Yes |
| colour | Shadow colour. If left out, it uses the element’s text colour. | – |
.card {
border-radius: 12px;
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
}The opacity slider controls the alpha of the shadow colour, which is the / 0.15 part above. It makes only the shadow see-through, not the card itself. Soft, low-opacity shadows usually look more natural than solid dark ones.
Layered shadows
You can list several shadows separated by commas. The first shadow in the list is drawn on top. A common pattern is to pair a small, tight shadow with a larger, softer one. The tight one defines the edge and the soft one gives a sense of height.
.card {
box-shadow:
0 1px 2px rgb(0 0 0 / 0.12),
0 8px 24px rgb(0 0 0 / 0.10);
}Inset shadows
With inset, the shadow is drawn inside the element’s padding box. It sits above the background but below the content. Inset shadows suit pressed buttons, wells and text fields that should look sunk into the page.
.search-field {
box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.08);
}Tips for natural-looking shadows
- Keep one light source. Use the same direction for every shadow on the page, usually a positive y offset, as if light comes from above.
- Higher means softer. Items that should feel raised higher, such as menus and dialogs, get a larger y offset and more blur than cards resting on the page.
- Make a small set. Pick two or three shadow levels in the box shadow generator and reuse them, ideally as CSS custom properties, rather than inventing a new shadow for each component.
Tip: A shadow does not change the size of the box or push other elements around, and it follows the element’s border-radius. If a shadow looks cut off, check whether a parent has overflow: hidden.
Watch out: Do not rely on a faint shadow alone to show where a button or input begins. WCAG 1.4.11 asks for 3:1 contrast for the visual information that identifies a control. A visible border is a safer choice. Also, changing box-shadow makes the browser repaint, so animate it sparingly.
Learn more
- CSS Box Model
- CSS Colors and Backgrounds
- CSS Animation Performance Tips: Smooth Motion Without the Jank
- Design Systems for Beginners: What They Are and How to Start One
- Dark Mode Design and CSS: From Colour Choices to a Working Toggle
- CSS Gradient Generator
Frequently asked questions
How do I put a shadow on only one side?
Combine an offset with a negative spread. For example, box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3); pulls the shadow in at the sides so it shows mainly below the box.
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the rectangle (and rounded corners) of the box. filter: drop-shadow() follows the visible shape of the content, such as a transparent PNG, but it has no spread value and no inset option.
Do shadows work in dark mode?
Dark shadows are hard to see on dark backgrounds. In dark themes, designers often rely more on lighter surface colours or subtle borders to show depth, and keep shadows for raised items such as menus.
Why does my shadow look grey and muddy?
Pure black at high opacity often looks heavy. Lower the opacity, increase the blur, or tint the shadow slightly towards the background colour.