What is Box Shadow?
box-shadow is a CSS property that adds shadow effects around an element's frame. You can control the offset, blur, spread, color, and whether the shadow appears inside or outside the element.
TL;DR
- 1.Syntax:
box-shadow: offset-x offset-y blur spread color - 2.Use multiple comma-separated shadows for realistic depth (e.g., subtle + deep layers).
- 3.Add
insetfor inner shadows (pressed/embossed effects). - 4.Shadows are purely visual -- they don't affect layout or element size.
Simple Explanation
Think of a playing card on a table. The shadow underneath tells your brain the card is floating above the surface. A small, tight shadow means the card is close to the table. A large, blurry shadow means it's floating high.
box-shadow does exactly this for HTML elements. You can control how far the shadow moves (offset), how blurry it is (blur radius), how much it spreads (spread radius), and its color. Stack multiple shadows for realistic depth.
Syntax Breakdown
Full syntax
box-shadow: [inset] offset-x offset-y blur spread color;
│ │ │ │ │ └─ shadow color
│ │ │ │ └──────── grows/shrinks the shadow
│ │ │ └────────────── blur radius (0 = sharp)
│ │ └────────────────────── vertical offset
│ └──────────────────────────────── horizontal offset
└───────────────────────────────────────── optional: inner shadowLive Examples
Click any example to copy its CSS.
Code Examples
Multi-layer realistic shadow
.card {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.07),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.07);
}Layering multiple subtle shadows creates much more natural-looking depth than a single heavy shadow.
Hover shadow transition
.card {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}Common Mistakes
Don't
/* Using pure black shadows --
looks harsh and unrealistic */
.card {
box-shadow: 0 4px 8px black;
}Do
/* Use transparent black for
natural-looking shadows */
.card {
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.1);
}Don't
/* Animating box-shadow directly
(triggers paint on every frame) */
.card:hover {
box-shadow: 0 20px 40px
rgba(0, 0, 0, 0.3);
}Do
/* For performance: use a pseudo-
element and animate its opacity */
.card::after {
content: '';
box-shadow: 0 20px 40px
rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.2s;
}
.card:hover::after {
opacity: 1;
}
Extract box-shadow values from any website
Frontend Hero's CSS Scanner lets you click any element and copy its box-shadow value instantly. Find shadow inspiration on any website.
Try CSS Scanner →Browser Support
box-shadow is supported in all browsers including IE9+, with over 99% global coverage. No vendor prefixes needed.
Related Tools
Frequently Asked Questions
box-shadow applies to the rectangular box of an element (including its border-radius). drop-shadow (via the filter property) follows the actual shape of the element, including transparent areas in images. Use box-shadow for cards and containers; use drop-shadow for irregularly shaped elements like PNGs with transparency.
Yes. Separate multiple shadows with commas. They stack on top of each other -- the first shadow in the list appears on top. This is how you create realistic, layered shadow effects. Example: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
The inset keyword makes the shadow appear inside the element instead of outside. It creates a pressed-in or embossed effect. Inset shadows are commonly used in neumorphism designs and to simulate depth on input fields. Syntax: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
No. Box shadows are purely visual and do not affect the element's size or layout. They don't push other elements around, and they can overlap neighboring elements without triggering overflow. This makes them safe to add or animate without causing layout shifts.
Use the spread radius as a negative value to shrink the shadow, then offset it in one direction. For example, a bottom-only shadow: box-shadow: 0 4px 6px -4px rgba(0,0,0,0.3). The negative spread (-4px) clips the shadow on the sides, and the vertical offset (4px) pushes it down.
CSS Glossary
What is Flexbox?
One-dimensional layout model
What is CSS Grid?
Two-dimensional layout system
What is Z-Index?
Stacking order and contexts
What is Box-Sizing?
Control element sizing model
What is CSS Specificity?
How browsers resolve conflicts
What is the CSS Cascade?
Rule priority and inheritance
What is a CSS Reset?
Normalize browser defaults
What is Tailwind CSS?
Utility-first CSS framework
What is Responsive Design?
Adapt layouts to any screen