How to make a box shadow
Start from a preset
Pick soft, card, floating or another one, or start from scratch.
Adjust the layers
Move the offset, blur, spread, color and opacity, and add a second layer for a more natural shadow.
Copy the code
Copy the CSS line into the element’s rule, or copy the Tailwind class.
The parts of box-shadow
Syntax: box-shadow: [inset] x y blur spread color
| Part | What it does | Example |
|---|---|---|
| Horizontal offset x | Positive moves right, negative left | 4px |
| Vertical offset y | Positive moves down, negative up | 8px |
| Blur | Larger is softer and wider (never negative) | 16px |
| Spread | Grows or shrinks the shadow before blurring | -4px |
| Color | Usually black with light transparency | rgba(0, 0, 0, 0.15) |
| inset | Puts the shadow inside the element | inset 0 2px 6px ... |
Tips for a good shadow
Light shadows look better. An opacity of 8% to 20% is usually enough; very dark shadows look dated.
Use two or more layers. A close sharp shadow plus a far soft one looks like a real shadow. Try the “Layered” preset.
One light direction. Keep the vertical offset positive across your site, as if light comes from above.
FAQ
How do I add a shadow to an element in CSS?
Add the box-shadow property to the element’s rule, for example .card { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }. In WordPress, put it in Appearance → Customize → Additional CSS.
How do I make an inner shadow?
Turn on “Inset”, which adds the inset keyword at the start of the shadow.
How do I add several shadows to one element?
Press “+ Layer”. Shadows are separated by commas, and the first one is drawn on top.
What’s the difference between box-shadow and drop-shadow?
box-shadow draws around the element’s box (with its rounded corners). filter: drop-shadow() follows the shape of a transparent PNG or SVG, and has no spread or inset.
Does it work in all browsers?
Yes. box-shadow has been supported by every browser for years and needs no -webkit- prefix.