CSS Shadows
CSS has two shadow properties: box-shadow for elements and text-shadow for text. Both are layerable.
box-shadow anatomy
CSS
box-shadow: 0 4px 12px rgb(0 0 0 / 0.1); /* ↑ ↑ ↑ ↑ */ /* │ │ │ └─ colour */ /* │ │ └──── blur radius */ /* │ └───────── y-offset */ /* └─────────── x-offset */
Useful patterns
| Goal | Shadow |
|---|---|
| Subtle card lift | 0 1px 3px rgb(0 0 0 / 0.08) |
| Hover lift | 0 6px 16px rgb(0 0 0 / 0.12) |
| Inset depression | inset 0 2px 4px rgb(0 0 0 / 0.15) |
| Focus ring | 0 0 0 3px rgb(4 170 109 / 0.3) |
| Multiple layered shadows | 0 1px 2px rgb(0 0 0 / .1), 0 8px 24px rgb(0 0 0 / .08) |
text-shadow
CSS
/* Soft glow */
h1 { text-shadow: 0 2px 8px rgb(0 0 0 / 0.4); }
/* Crisp outline (no real stroke property — fake it with layered shadows) */
h1 {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
Tip: Layered shadows ("0 1px 2px rgba, 0 8px 24px rgba") feel more natural than a single big blur. It's how modern design systems get that subtle depth.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Shadows</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Add a subtle drop shadow under this card.
.card {
-shadow: 0 4px 12px rgb(0 0 0 / 0.1); }
Same prefix as box-sizing.
Discussion
Loading…