How to Create a CSS Box Shadow (With Examples)
The CSS box-shadow property adds depth, elevation, and visual polish to elements. From subtle card shadows to neon glows, it's one of the most versatile visual properties in CSS. The syntax takes up to six values — once you understand the order, you can create any shadow effect.
- Add shadows to any element with CSS box-shadow.
- Covers box-shadow syntax.
- Covers layered shadows for realism.
- Covers colored glow effects.
- Covers performance tips.
Box-Shadow Syntax
The box-shadow property follows this order:
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
Offset-x moves the shadow horizontally (positive = right). Offset-y moves it vertically (positive = down). Blur-radius softens the edge (0 = sharp). Spread-radius expands or contracts the shadow area. Color should use rgba() for natural-looking semi-transparent shadows.
Layered Shadows for Realism
Single shadows look flat. Production-quality shadows use multiple layers that mimic how light scatters in the physical world:
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations.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);
Each layer doubles the offset and blur while keeping opacity low. The result is dramatically more realistic than a single shadow with the same total darkness.
Colored Glow Effects
Zero-offset shadows with high blur create glow effects:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.box-shadow: 0 0 20px rgba(0, 255, 209, 0.4);
Layer multiple glows for intensity:
box-shadow:
0 0 10px rgba(0, 255, 209, 0.3),
0 0 30px rgba(0, 255, 209, 0.2),
0 0 60px rgba(0, 255, 209, 0.1);
This is popular for CTAs, featured cards, and dark-mode interfaces. Use the Shadow Generator to build and preview these effects visually.
Performance Tips
Avoid animating box-shadow directly — each frame triggers a repaint. Instead, create a pseudo-element with the target shadow and animate its opacity. The shadow is painted once, and opacity animation is GPU-accelerated:
.card::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.3s;
}
.card:hover::after { opacity: 1; }