CSS Advanced
CSS Shadows
Shadows add depth and hierarchy to a design. box-shadow draws a shadow around an element's box, while text-shadow draws one behind text. Both accept offsets, blur, and color, and you can stack several shadows for glow and neon effects.
box-shadow syntax
box-shadow takes horizontal and vertical offsets, an optional blur radius, an optional spread radius, and a color. Positive offsets push the shadow right and down; the inset keyword draws the shadow inside the box.
box-shadow: offset-x offset-y blur spread color;
box-shadow: 0 8px 20px 0 rgba(0,0,0,.25);
box-shadow: inset 0 2px 6px rgba(0,0,0,.4); /* inner shadow */| Part | Meaning |
|---|---|
| offset-x | Horizontal distance (right if positive) |
| offset-y | Vertical distance (down if positive) |
| blur | How soft the edge is (0 = sharp) |
| spread | Grows or shrinks the shadow size |
| inset | Draws the shadow inside instead of outside |
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; background:#eef2ff; display:flex; gap:24px; padding:40px; }
.card { width:120px; height:120px; background:#fff; border-radius:14px;
display:flex; align-items:center; justify-content:center; font-weight:bold; color:#334155; }
.low { box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mid { box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.high { box-shadow: 0 18px 40px rgba(0,0,0,.28); }
</style>
</head>
<body>
<div class="card low">low</div>
<div class="card mid">mid</div>
<div class="card high">high</div>
</body>
</html>Layering multiple shadows
You can list several shadows separated by commas. They render from first (front) to last (back), which lets you build realistic soft elevation or glowing outlines.
<!DOCTYPE html>
<html>
<head>
<style>
body { background:#020617; display:grid; place-items:center; height:220px; font-family:sans-serif; }
.neon {
padding: 14px 30px; border:2px solid #22d3ee; background:transparent;
color:#22d3ee; border-radius:10px; font-size:18px; font-weight:bold;
box-shadow: 0 0 8px #22d3ee, 0 0 20px #22d3ee, inset 0 0 12px rgba(34,211,238,.4);
}
</style>
</head>
<body>
<button class="neon">GLOW</button>
</body>
</html>text-shadow
text-shadow works like box-shadow but has no spread value: offset-x, offset-y, blur, and color. Stacking several colored shadows creates neon text, outlines, or a retro 3D look.
<!DOCTYPE html>
<html>
<head>
<style>
body { background:#0b0b1a; display:grid; place-items:center; height:240px; font-family:sans-serif; gap:20px; }
h1 { margin:0; font-size:52px; }
.neon-text {
color:#fff;
text-shadow: 0 0 5px #f0f, 0 0 15px #f0f, 0 0 30px #f0f;
}
.retro {
color:#fde047;
text-shadow: 2px 2px 0 #ea580c, 4px 4px 0 #7c2d12;
}
</style>
</head>
<body>
<h1 class="neon-text">NEON</h1>
<h1 class="retro">RETRO</h1>
</body>
</html>For soft, natural shadows use a low opacity color and a larger blur, and keep offset-y a bit larger than offset-x to mimic overhead light.
Shadows do not affect layout; they never take up space, so they can overflow their container and overlap neighbors.
Key points
- box-shadow order is offset-x, offset-y, blur, spread, color.
- The inset keyword draws the shadow inside the box.
- Comma-separated shadows layer front to back.
- text-shadow has no spread value.
- Shadows are purely visual and never change layout.