CSS Box Shadow

Responsive work taught you when layout changes. Box shadow starts Effects & Motion: soft depth around a card, a pressed look inside a field, or a quiet lift on a button — painted with one property, box-shadow, without changing the box model size.

Parts of the shadow

📊 box-shadow parts at a glance

Part	Everyday job
`offset-x` / `offset-y`	Where the shadow sits relative to the box (right/down when positive)
`blur-radius`	Softness — `0` is hard-edged; larger values feather the edge
`spread-radius`	Optional grow/shrink of the shadow shape before blur
`color`	Usually `rgba(...)` so the shadow can stay semi-transparent
`inset`	Optional keyword — draws the shadow inside the box
Multiple lists	Comma-separated shadows stack (far soft + near crisp)

Think of elevation, not decoration spam. One soft layer under a card often beats three loud outlines.

Soft outer elevation

A common card recipe: small downward offset, moderate blur, little or no spread, and a translucent black (or gray). The shadow should hint at light from above — not look like a black rectangle glued behind the box.

Calm card elevation

css

.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}

Positive offset-y drops the shadow below the box. Keep alpha low so text and neighbors stay readable.

Inset — depth inside the box

Add the inset keyword to draw the shadow inward. Useful for wells, pressed buttons, or input fields that should feel recessed.

Inset well for a field

css

.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}

Inset does not replace border or padding — it only changes how light seems to fall inside the painted area.

Layered shadows

List more than one shadow, separated by commas. A far soft layer plus a nearer, tighter layer often reads as natural elevation without a heavy outline.

Two-layer soft lift

css

.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}

Order in the list is paint order; both still belong to the same element. Prefer two quiet layers over one opaque smear.

Reset, accent, and focus on the box

Set box-shadow: none when a state should sit flat again. A tinted shadow can support a brand accent — still keep blur soft and alpha modest. Remember: glyphs use text-shadow (Text Effects); boxes use box-shadow.

Flat reset and a tinted accent

css

.chip {
box-shadow: none;
}

.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}

Try it yourself

Give a white card a single soft outer shadow (0 x-offset, small y, blur ~1rem, low alpha).
Add an inset shadow to a search field so it feels slightly recessed.
Upgrade one panel to a two-layer stack (near + far).
Find any solid black box-shadow in a practice file and soften it with rgba.
Confirm a heading glow uses text-shadow, not box-shadow.

Common mistakes

Fully opaque black shadows that look like duplicate boxes
Treating blur and spread as the same knob
Putting box-shadow on text when you meant text-shadow
Shadowing every list item, link, and icon until the page feels foggy
Forgetting inset when the design needs a pressed or hollow look

Summary

box-shadow uses offset, blur, optional spread, color, and optional inset
Soft translucent outer shadows sell calm elevation
Stack comma-separated layers for richer depth; use none to flatten
Boxes ≠ glyphs — reserve text-shadow for text
Next in Effects & Motion: Transitions

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language