Use box-shadow to add a shadow outside an element’s frame or, with inset, inside it. A shadow can be tuned with horizontal and vertical offsets, blur, spread, and color; you can also stack several shadows in one declaration.
How to add a basic shadow in CSS
Put a box-shadow declaration in the rule for the element you want to style:
As an Amazon Associate I earn from qualifying purchases.
.card {
box-shadow: 0 4px 12px rgb(0 0 0 / 0.16);
}This example places the shadow four pixels down, gives it a 12-pixel blur, and uses a translucent black color. The values are an illustrative starting point, not a universal recipe: adjust them to suit the design. See the MDN Web Docs reference for box-shadow for the full syntax and examples.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesWhat the values in box-shadow mean
The general pattern is box-shadow: [inset] <offset-x> <offset-y> [<blur-radius> [<spread-radius>]] [<color>]. Only the horizontal and vertical offsets are required; blur, spread, color, and inset are optional.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Value | What it controls |
|---|---|
offset-x |
Horizontal displacement. A negative value moves the shadow left. |
offset-y |
Vertical displacement. A negative value moves the shadow upward. |
blur-radius |
How soft the edge is. It cannot be negative. |
spread-radius |
How much the shadow expands or contracts. Positive values expand it; negative values contract it. If omitted, it is zero. |
color |
The shadow color. If omitted, it uses the element’s color value, as documented by MDN. |
inset |
Changes the shadow from an outer shadow to an inner one. |
For a crisp outline-like shadow, set blur to zero and use spread to set its size:
.badge {
box-shadow: 0 0 0 2px rebeccapurple;
}For a more subtle result, a low-opacity color can keep the shadow from overpowering the element.
How to make an inset shadow
Add inset before the offset values. The shadow is rendered inside the frame, above the background and below the content, rather than falling outside the element. This example places a soft shadow toward the bottom of an input:
.input {
box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.18);
}The W3C CSS Backgrounds and Borders Module Level 3 specifies the behavior of shadows, including inset shadows.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
How to add multiple shadows
Separate complete shadow values with commas. Each shadow can have its own offsets, blur, spread, color, and inset setting. The first shadow in the list is painted on top of the later ones.
.panel {
box-shadow: 0 2px 4px rgb(0 0 0 / 0.12),
0 10px 24px rgb(0 0 0 / 0.10);
}Here, the smaller shadow sits above the broader, softer layer. Listing the shadows in the opposite order would change which one appears on top.
How to tune a shadow
Change one value at a time so you can see what it does. Start with the offsets to position the shadow, then adjust blur for softness, spread for size, and color for contrast. If the effect should appear inside the frame, add inset.
Recommended Free Tools
Browser support
MDN marks box-shadow as Baseline and widely available, with support across browsers since July 2015. Typical current use does not require historical vendor-prefixed forms. If a project must support very old browsers, check the MDN browser compatibility table against its actual target browsers rather than assuming universal legacy support.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
