The box-shadow property adds one or more shadows around an element’s frame. Each shadow uses X/Y offsets, optional blur and spread, a color, and an optional inset keyword.
The initial value is none. Shadows follow border-radius, do not change layout size, and can be stacked with commas. For text, use text-shadow. For a non-standard mirror effect, see box-reflect.
Not deprecated and not experimental. Baseline widely available across modern browsers (IE 9+).
box-shadow: none | inset? && <length>{2,4} && <color>? | initial | inherit;Lengths mean: offset-x, offset-y, then optional blur, then optional spread. List multiple shadows with commas.
| Value | Description | Try it |
|---|---|---|
none | Default. No shadow | Try it |
offset-x offset-y | Required lengths. Negative X goes left; negative Y goes up | Try it |
blur-radius | Optional. Softens the edge. Cannot be negative | Try it |
spread-radius | Optional. Expands (+) or shrinks (-) the shadow before blur | Try it |
<color> | Shadow color. If omitted, uses the element color | Try it |
inset | Draws the shadow inside the box | Try it |
| comma list | Multiple shadows. First is painted on top | Try it |
initial | Resets to none | Try it |
inherit | Takes the parent value | Try it |
box-shadowStart with offsets, then soften with blur, then tune size and color.
offset-x and offset-y (for example 4px 8px).4px 8px 16px).rgb(0 0 0 / 0.2).inset for an inner shadow, or commas for layered shadows.| Piece | Required? | Role |
|---|---|---|
| X / Y offset | Yes | Where the shadow sits relative to the box |
| Blur | Optional | Soft edge. 0 is a hard edge |
| Spread | Optional | Grows or shrinks the shadow shape |
| Color / inset | Optional | Paint and inner vs outer placement |
The card stays the same. Change only box-shadow and watch the depth.
Each snippet focuses on box-shadow. Use Try It Yourself for a live editor.
Two lengths move the shadow. No blur means a hard edge.
<style>
.box {
box-shadow: 6px 6px 0 #1d4ed8;
}
</style>
<div class="box">Card</div>6px 6px shifts the shadow right and down.0 — a sharp edge.inset, this is a drop shadow.A third length softens the shadow for a light card lift.
<style>
.box {
box-shadow: 4px 8px 16px rgb(15 23 42 / 0.2);
}
</style>
<div class="box">Card</div>4px 8px place the shadow slightly down-right.16px spreads the edge so it looks airy.rgb(... / 0.2) keeps the shadow gentle.inset draws the shadow inside the box for a pressed look.
<style>
.box {
box-shadow: inset 0 2px 8px rgb(15 23 42 / 0.25);
}
</style>
<div class="box">Card</div>inset. The shadow paints inside the padding box.0 2px pushes the shade slightly downward.8px keeps the edge smooth.Shadows are paint only. Watch clipping, stacking, and contrast.
Shadows sit outside the box model. A parent with overflow: hidden can clip them even though width/height are unchanged.
If the element has border-radius, the shadow corners match that curve.
In a comma list, earlier shadows paint above later ones. Order matters for layered looks.
For keyboard focus, prefer a clear outline (or a deliberate focus style). Shadows alone can be easy to miss.
Many large blurred shadows on busy pages can slow scrolling. Keep card shadows light when you can.
box-shadow is a browser style property. Node.js, Deno, and Bun do not apply it.
Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+, Opera 10.5+, Internet Explorer 9+. Safe for production without a prefix.
Bottom line: Unprefixed box-shadow is standard and widely supported. No vendor prefix is needed in current browsers.
inset.One line: box-shadow adds depth with offset, blur, spread, and color — outside or inset.
Control whether padding and border are inside the width.
8 people found this page helpful