A shadow in CSS is a visual effect of depth or separation that is projected around a box.
box-shadow Syntax
The box-shadow property has a syntax that can be a bit intimidating at first, because it accepts multiple values in a row.
.card {
/* x | y | blur | spread | color */
box-shadow: 0 8px 24px 0 rgb(0 0 0 / 15%);
}
Let’s break it down calmly:
- X Offset: moves the shadow to the right or left.
- Y Offset: moves the shadow up or down.
- Blur: controls how much the shadow is blurred.
- Spread: expands or contracts the size of the shadow.
- Color: usually a black color with transparency is used.
A typical value for a card could be this:
.card {
background: white;
border-radius: 12px;
box-shadow: 0 12px 30px rgb(15 23 42 / 12%);
}
Notice that the shadow is not opaque black. It’s a dark color with low opacity. Realistic shadows are usually soft, because in the real world, light doesn’t draw perfect black blocks around things.
Inset Shadows with inset
If we add the word inset, the shadow is drawn inside the element.
.indented-field {
box-shadow: inset 0 2px 6px rgb(0 0 0 / 20%);
}
A more useful example would be a form field with a very subtle inner shadow.
input {
border: 1px solid #cccccc;
border-radius: 6px;
box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
}
Use inset sparingly. If you overdo it, the design can look like a fifteen-year-old interface, with sunken buttons everywhere and the smell of an old admin panel.
Multiple Shadows at Once
box-shadow allows declaring several shadows separated by commas. This is useful for creating more natural effects.
.elevated-card {
box-shadow:
0 2px 6px rgb(0 0 0 / 8%),
0 16px 32px rgb(0 0 0 / 12%);
}
The first shadow defines the close contact with the background. The second creates a broader elevation. Together they give a more believable sense of depth than a single, large, isolated shadow.
Border or Shadow, When to Use Each
We don’t always need both. Sometimes a soft border is enough. Other times a shadow works better.
- Use borders to separate elements in dense interfaces, forms, tables, and panels.
- Use shadows to suggest elevation, floating cards, dropdown menus, and modals.
- Use both carefully when you want a very defined but still light card.
Borders and shadows are tools that should be used quite judiciously. Applied well, they make an interface easier to understand. Applied poorly, they turn the page into a collection of floating stickers.
