box-shadow: Offsets, Blur, Spread, and Inset Shadows

CSS Reference

box-shadow paints outer or inset shadows around a box. Horizontal and vertical offsets are required; blur and spread are optional. A shadow does not reserve layout space for neighboring elements.

Syntax and value choices

Property	Initial value	Inherited	Main application conditions
`box-shadow`	none	No	All elements; visible effects depend on the text, image, or box conditions below

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

.card { box-shadow: 4px 6px 12px 2px rgb(0 0 0 / 25%); }
.inset { box-shadow: inset 0 0 0 3px #006c9c; }

Value or category	Behavior and choice
`First two lengths`	Horizontal and vertical offsets; negative values reverse the direction.
`Third length`	Blur radius; negative blur is invalid.
`Fourth length`	Spread distance, which may be negative.
`inset`	Paint an inner shadow.
`Commas`	Layer multiple shadows, with the first listed shadow on top.

For supported values and conditions, see MDN box-shadow.

Run the example and compare results

Save this complete code as css-reference-10628-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>box-shadow comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 200px; height: 100px; padding: 18px; background: #bfe3ff; margin: 14px; }
.target { box-shadow: 4px 6px 12px 2px rgb(0 0 0 / 25%); }
.reference { box-shadow: inset 0 0 0 3px #006c9c; }
</style>
</head>
<body>
<main id="demo">
<h1>box-shadow comparison</h1>
<section class="samples"><div class="a"><p class="label">Outer shadow</p><div class="target">Box shadow</div></div><div class="b"><p class="label">inset inner shadow</p><div class="reference">Box shadow</div></div></section>
</main>
</body>
</html>

The first box has a blurred shadow toward the lower right. The second has an inset band. Neither shadow pushes nearby boxes away.

Color and curved corners

Omitting the shadow color uses currentColor. Explicit alpha colors make the intended effect clearer. Box shadows follow border-radius, but do not trace the transparent contour of an image as a drop-shadow filter can.

Clipping and rendering work

Ancestor hidden or clip overflow can cut an outer shadow off. Large blurred areas and many repeated layers can increase rendering work, so test the actual interface. Use text-shadow for glyph shadows.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

Change only .target’s 12px blur to zero and restore it. Then change only its 2px spread to -2px, compare the painted area, and restore it.
With two comma-separated shadows, the first paints above the second. Reverse their order and also inspect ancestor overflow rather than blaming every cut-off edge on the shadow values.

For using borders and shadows together on components, see CSS Borders, Rounded Corners, and Shadows. Related properties to compare alongside these conditions are text-shadow, overflow.

When the result is missing or unexpected

Inspect ancestor overflow and available space when a shadow is cut off.
Check for a later none or another shadow declaration.

CSS Reference

CSS / Reference / border-style: Border Patterns, Side Order, and Hidden Conflicts

Choose border patterns for each side and inspect shorthand resets. Compare none with hidden in collapsed tables and account for zero computed border widths.

CSS / Reference / tab-size: Preserved Tabs and Tab-Stop Positions

Set tab stops for real tab characters and inspect their positions. Distinguish editor-generated spaces, whitespace collapsing, and visual wrapping.

CSS / Reference / text-shadow: Glyph Shadows, Layers, and Contrast

Add text shadows without box-shadow-only syntax. Compare blur and layer order, preserve legibility, and avoid treating decoration as a contrast guarantee.

CSS / Reference / box-shadow: Offsets, Blur, Spread, and Inset Shadows

Build box shadows from offsets, blur, and spread, then inspect clipping and layering. Distinguish box geometry from glyph or transparent-image shadows.

CSS / Reference / quotes: Choose Nested Quotation Marks

Choose generated quotation pairs for nested text and distinguish them from literal punctuation. Compare automatic marks, none, and quotation-depth operations.

CSS / Reference / background-position: Percentages, Centers, and Edge Offsets

Position backgrounds using centers, percentages, or edge offsets. Calculate percentages from the remaining space and account for oversized cover images and multiple layers.

CSS / Reference / background-attachment: Viewport, Box, and Internal Scroll Attachment

Compare local and scroll backgrounds inside a scrolling box and distinguish them from viewport-fixed backgrounds. Test target-browser behavior and a usable fallback.

CSS / Reference / list-style-type: Change List Markers and Numbering

Style list markers while keeping ordered and unordered semantics. Compare numbering styles, starting values, marker removal, and shorthand resets.

CSS / Reference / background-repeat: Tiling, Space, and Round

Control horizontal and vertical background tiling and compare repeat, no-repeat, space, and round with the same tile and positioning area.

CSS / Reference / background-clip: Background Painting Areas and Text Clipping

Choose border, padding, or content painting areas independently of image positioning. Compare visible boundaries and plan readable fallbacks for text-clipped backgrounds.