box-shadow draws a shadow around an element’s box.
style.css
PHP
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);The values
| Position | Meaning |
|---|---|
| 1 | Horizontal offset: positive moves right |
| 2 | Vertical offset: positive moves down |
| 3 | Blur radius: bigger is softer (optional) |
| 4 | Spread: grows or shrinks the shadow (optional) |
| Color | Usually a transparent black |
inset | Optional keyword: draw the shadow inside |
index.html
HTML
<style>
.row { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px; background: #f4ece6; }
.box { width: 110px; height: 70px; background: #fff; border-radius: 10px; display: grid; place-items: center; font-size: 13px; }
.a { box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.b { box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.c { box-shadow: 0 0 0 3px #d94a00; }
.d { box-shadow: inset 0 3px 8px rgba(0,0,0,.3); }
.e { box-shadow: 0 0 18px 4px rgba(217,74,0,.5); }
</style>
<div class="row">
<div class="box a">small</div><div class="box b">large</div><div class="box c">ring</div>
<div class="box d">inset</div><div class="box e">glow</div>
</div>Realistic shadows use layers
One soft shadow looks flat. Two or three, from tight to wide, look more natural:
style.css
CSS
.card {
box-shadow:
0 1px 2px rgba(0,0,0,.08),
0 4px 8px rgba(0,0,0,.08),
0 12px 24px rgba(0,0,0,.08);
}Rings without borders
box-shadow: 0 0 0 3px color draws a ring that does not affect layout, which is why it is popular for focus styles. The ring follows border-radius.
Keep it subtle
- Low opacity (0.08 to 0.25) on black looks cleaner than dark shadows.
- The bigger the shadow, the higher the element seems to float. Use bigger values for things that overlap the page, such as dropdowns and modals.
- A shadow does not change the element’s size or push neighbours.
lightbulb
Text shadow is separate
box-shadow follows the box. For text, use text-shadow. To shadow a shape with transparent areas such as a PNG, filter: drop-shadow() follows the visible outline, see CSS Filters.