CSS Shadows

Beginner ~8 min read

Box Shadow Basics

box-shadow adds shadows to elements. Syntax: x-offset y-offset blur spread color.

HTML

CSS

<div class='card1'>Small shadow</div>
<div class='card2'>Medium shadow</div>
<div class='card3'>Large shadow</div>

Add inset keyword for inner shadows, creating a pressed or recessed effect.

HTML

CSS

<div class='outer'>Outer shadow</div>
<div class='inner'>Inset shadow (pressed)</div>

Stack multiple shadows by separating them with commas for complex effects.

HTML

CSS

<div class='card'>Layered shadows create depth</div>

Use any color for shadows, not just black! Great for creating glowing effects.

HTML

CSS

<div class='blue'>Blue glow</div>
<div class='green'>Green glow</div>
<div class='purple'>Purple glow</div>

text-shadow adds shadows to text. Syntax: x-offset y-offset blur color.

HTML

CSS

<h1 class='subtle'>Subtle text shadow</h1>
<h1 class='bold'>Bold text shadow</h1>
<h1 class='glow'>Glowing text</h1>

Pro Tip: Use subtle shadows (low opacity, small blur) for modern, clean designs. Avoid heavy shadows unless going for a specific dramatic effect!

Which keyword creates an inner shadow?

inner

inset

inside

internal