Box & Text Shadows
Add depth with box-shadow and text-shadow.
Syntax
box-shadow: 0 4px 12px rgba(0,0,0,0.2);Shadows add depth and emphasis.
box-shadowadds a shadow around an element's box.text-shadowadds a shadow behind text.
The values are: horizontal offset, vertical offset, blur radius, optional spread, and color.
Example
Loading editor…
Press Run to see the result.
When to use it
- A designer adds box-shadow to a card component to visually lift it off the page and indicate it is interactive.
- A developer uses text-shadow to add a subtle dark outline behind white hero text so it remains readable over any background image.
- A UI engineer uses multiple box-shadow layers to simulate a pressed button state with an inner shadow when the button is active.
More examples
Card elevation with box-shadow
Applies a subtle shadow on a card and deepens it on hover to communicate interactive elevation.
.card {
background: #fff;
border-radius: 8px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}Text shadow for readability
Adds a dark text-shadow behind white heading text to keep it legible over variable photo backgrounds.
.hero-title {
color: #fff;
font-size: 3rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}Multiple box-shadow layers
Combines an inset shadow with a small outer shadow on :active to simulate a button being physically pressed.
.btn:active {
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.25),
0 1px 2px rgba(0,0,0,0.1);
transform: translateY(1px);
}
Discussion