On this page

CSS Box Shadow & Text Shadow

Badar KhalilUpdated September 29, 2026 6 min read

What Are CSS Box Shadow and Text Shadow?

The CSS box-shadow property draws one or more shadows around an element's box, while text-shadow adds shadows to the letters of text. Shadows create depth, elevation, focus and glow effects without images. Our focus keyword is CSS box shadow, and this lesson also covers trending searches: CSS text-shadow examples, layered realistic shadows, inset shadow, neumorphism, neon glow effect, material design elevation, box-shadow vs drop-shadow, and box-shadow performance.

1. box-shadow Syntax

Code

box-shadow: offset-x offset-y blur-radius spread-radius color;
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 20%);
box-shadow: inset 0 2px 6px rgb(0 0 0 / 30%);

offset-x (required): horizontal distance. Positive moves right.
offset-y (required): vertical distance. Positive moves down.
blur-radius (optional, default 0): larger value gives a softer, more spread out edge. It cannot be negative.
spread-radius (optional, default 0): grows (positive) or shrinks (negative) the shadow size.
color (optional): defaults to currentColor. Use semi-transparent colors for natural results.
inset (optional keyword): draws the shadow inside the box instead of outside.

2. Multiple Shadows

Separate shadows with commas. The first shadow is on top. Layering several soft shadows looks much more realistic than one big shadow.

Code

.card {
  box-shadow:
    0 1px 1px rgb(0 0 0 / 8%),
    0 2px 2px rgb(0 0 0 / 8%),
    0 4px 4px rgb(0 0 0 / 8%),
    0 8px 8px rgb(0 0 0 / 8%),
    0 16px 16px rgb(0 0 0 / 8%);
}

3. Elevation System (Design Tokens)

Store shadows as custom properties so the whole site uses consistent depth: --shadow-sm, --shadow-md, --shadow-lg. Higher elements (modals, dropdowns) get bigger offsets and blur; low elements (cards, buttons) get small ones.

4. Popular Box Shadow Effects

Soft card shadow: 0 10px 30px -10px rgb(0 0 0 / 25%) (negative spread keeps it tight).
Ring outline: 0 0 0 3px #2563eb (zero blur, spread only). Great for focus states.
Glow: 0 0 20px #22d3ee for neon and hover effects.
Inset depth: inset 0 2px 4px rgb(0 0 0 / 25%) for pressed buttons and input fields.
Neumorphism: a light shadow and a dark shadow on the same background: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff.
One-sided shadow: use a negative spread with an offset, so only one edge shows.

5. text-shadow

Code

text-shadow: offset-x offset-y blur-radius color;
text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);

text-shadow works like box-shadow but has no spread and no inset. It follows the shape of each glyph. Multiple shadows are allowed, which enables outlines, glows and 3D or retro text.

Readability on images: 0 1px 3px rgb(0 0 0 / 60%).
Neon glow: stack several shadows with growing blur: 0 0 5px #fff, 0 0 10px #f0f, 0 0 20px #f0f, 0 0 40px #f0f.
Text outline: four shadows with 1px offsets in each direction (or use -webkit-text-stroke).
Letterpress: a light shadow 1px below dark text.

6. box-shadow vs filter: drop-shadow()

	box-shadow	filter: drop-shadow()
Follows	The rectangular box (with border-radius)	The actual visible shape, including transparent PNG/SVG areas
Spread and inset	Yes	No
Multiple shadows	Comma separated list	Chain several drop-shadow() functions
Performance	Lighter	Heavier

Use drop-shadow for transparent images, icons, speech-bubble tails, and clipped shapes (clip-path cuts box-shadow away, but a drop-shadow on a parent works).

7. Performance Tips

Large blur values on many elements cost paint time.
Do not animate box-shadow directly on many elements. Instead, put the big shadow on a ::after pseudo-element and animate its opacity, which is GPU friendly.
Use fewer layers on mobile lists.

8. Accessibility

Shadows are ignored in forced-colors (Windows high contrast) mode. Never use a box-shadow ring as the only focus indicator. Add outline: 2px solid transparent; so a visible outline appears in that mode.
Keep enough contrast between text and its background when using text-shadow for readability, and never rely on the shadow alone.

Best Practices

Use low-opacity black or a darker tint of the background color for natural shadows.
Use layered shadows and design tokens for consistent elevation.
Match shadow direction across the whole page (light from the top).
Use negative spread to avoid shadows that look too large.

Common Mistakes

Using pure black at full opacity, which looks harsh.
Negative blur values, which are invalid.
Expecting box-shadow to affect layout. It does not take space and can be clipped by overflow: hidden on a parent.
Forgetting that box-shadow follows border-radius but not clip-path.

Summary

Box-shadow adds depth to boxes, text-shadow styles letters, and drop-shadow follows real shapes. Use layered soft shadows, design tokens and pseudo-element animation to get beautiful and fast results. Practice with the editable examples below.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; background: #f1f5f9; padding: 20px; }
  .b { display: inline-block; width: 120px; height: 80px; margin: 14px; background: #fff; border-radius: 10px; text-align: center; line-height: 80px; font-size: 13px; }
  .s1 { box-shadow: 4px 4px 0 #94a3b8; }
  .s2 { box-shadow: 0 6px 16px rgb(0 0 0 / 20%); }
  .s3 { box-shadow: 0 0 0 4px #2563eb; }
  .s4 { box-shadow: inset 0 3px 8px rgb(0 0 0 / 30%); }
</style>
<div class='b s1'>hard offset</div><div class='b s2'>soft blur</div><div class='b s3'>ring (spread)</div><div class='b s4'>inset</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; background: #f8fafc; padding: 24px; }
  .card { max-width: 260px; padding: 20px; margin: 12px; display: inline-block; background: #fff; border-radius: 14px; transition: box-shadow .3s, transform .3s; }
  .single { box-shadow: 0 16px 16px rgb(0 0 0 / 25%); }
  .layered { box-shadow: 0 1px 1px rgb(0 0 0 / 8%), 0 2px 2px rgb(0 0 0 / 8%), 0 4px 4px rgb(0 0 0 / 8%), 0 8px 8px rgb(0 0 0 / 8%), 0 16px 16px rgb(0 0 0 / 8%); }
  .layered:hover { transform: translateY(-4px); }
</style>
<div class='card single'>One heavy shadow</div>
<div class='card layered'>Layered, realistic shadow (hover me)</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  :root { --sh-sm: 0 1px 3px rgb(0 0 0 / 15%); --sh-md: 0 6px 16px rgb(0 0 0 / 18%); --sh-lg: 0 20px 40px -8px rgb(0 0 0 / 30%); }
  body { font-family: sans-serif; background: #e2e8f0; padding: 24px; }
  .e { display: inline-block; width: 110px; padding: 24px 8px; margin: 12px; background: #fff; border-radius: 10px; text-align: center; }
  .sm { box-shadow: var(--sh-sm); } .md { box-shadow: var(--sh-md); } .lg { box-shadow: var(--sh-lg); }
</style>
<div class='e sm'>--sh-sm</div><div class='e md'>--sh-md</div><div class='e lg'>--sh-lg</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { background: #0f172a; font-family: sans-serif; padding: 24px; }
  .neon { font-size: 44px; font-weight: 800; color: #fff; text-shadow: 0 0 5px #fff, 0 0 12px #22d3ee, 0 0 24px #22d3ee, 0 0 48px #22d3ee; margin: 0 0 20px; }
  .retro { font-size: 44px; font-weight: 800; color: #fde047; text-shadow: 3px 3px 0 #ef4444, 6px 6px 0 #7c3aed; margin: 0 0 20px; }
  .outline { font-size: 44px; font-weight: 800; color: #0f172a; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; margin: 0; }
</style>
<h1 class='neon'>Neon Glow</h1><h1 class='retro'>Retro 3D</h1><h1 class='outline'>Outlined</h1>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; padding: 24px; background: #e0e5ec; }
  .neo { display: inline-block; padding: 30px 40px; margin: 16px; border-radius: 18px; background: #e0e5ec; color: #475569; }
  .out { box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff; }
  .in { box-shadow: inset 8px 8px 16px #b8bec7, inset -8px -8px 16px #ffffff; }
  .png { display: inline-block; width: 90px; height: 90px; margin: 16px; background: #f59e0b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .wrap { display: inline-block; filter: drop-shadow(6px 8px 6px rgb(0 0 0 / 40%)); }
</style>
<div class='neo out'>Neumorphic raised</div><div class='neo in'>Neumorphic pressed</div>
<div class='wrap'><div class='png'></div></div> drop-shadow follows the triangle shape

Output

Press Run to execute.

Exercise: Design an Elevated Card With HoverHTML

Style .card with a white background, 12px radius and a soft layered shadow (at least two shadows). On hover, lift it 4px using transform and make the shadow larger. Add a smooth transition.

Try it Yourself HTML

<style>
  body { background: #f1f5f9; padding: 30px; font-family: sans-serif; }
  .card { width: 240px; padding: 20px; /* your code */ }
  .card:hover { /* your code */ }
</style>
<div class='card'>Hover over this card</div>

Output

Press Run to execute.

Show expected output

A white card with a soft shadow that lifts and grows on hover.

This is a self-check — compare your result with the expected output above.

Exercise: Create a Neon Text EffectHTML

On a dark background, make the h1 white with a pink neon glow using at least three text-shadow layers with increasing blur.

Try it Yourself HTML

<style>
  body { background: #0b0b1a; padding: 40px; }
  h1 { font: 800 56px sans-serif; color: #fff; /* your code */ }
</style>
<h1>NEON SIGN</h1>

Output

Press Run to execute.

Show expected output

White text surrounded by a soft pink glow.

This is a self-check — compare your result with the expected output above.

Quiz: Box Shadow & Text Shadow Quiz Pass 70%

Loading quiz…

Was this page helpful?