The box-shadow property in CSS3 is highly versatile. When used creatively, it can produce rich visual effects with pure CSS. Here are several practical techniques.

Directional Shadows

By adjusting offsets and spread radius, shadows can be limited to a specific direction.

Top
Right
Bottom
Left
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.drop-shadow.top {
    box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.right {
    box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.bottom {
    box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.left {
    box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}

Key point: a negative spread-radius (fourth parameter) cancels shadow diffusion on non-target sides, making single-side shadows possible.

Emphasis Effects

Zero-offset shadows with large spread radius simulate glow or border effects.

Dark
Light
Inset
Border
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.emphasize-dark {
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
.emphasize-light {
    box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}
.emphasize-inset {
    box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}
.emphasize-border {
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}
  • Dark/Light: blur radius + spread radius create a glow effect
  • Inset: the inset keyword creates inner shadow, simulating a concave look
  • Border: when spread-radius is 7px with no blur, inset shadow appears as an inner border

Gradient Overlays

Combining background-image gradients with semi-transparent box-shadow creates subtle depth.

Light Linear
Dark Linear
Light Radial
Dark Radial
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

.gradient-light-linear {
    background-image: linear-gradient(
        rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gradient-dark-linear {
    background-image: linear-gradient(
        rgba(0,0,0,.25), rgba(0,0,0,0));
}
.gradient-light-radial {
    background-image: radial-gradient(
        center 0, circle farthest-corner,
        rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.gradient-dark-radial {
    background-image: radial-gradient(
        center 0, circle farthest-corner,
        rgba(0,0,0,0.15), rgba(0,0,0,0));
}

Note: vendor prefixes have been removed — modern browsers all support the standard linear-gradient / radial-gradient syntax.

Rounded Shadows

Combining border-radius with shadows yields more natural card-like visuals.

Light
Heavy
Full
Barrel
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.light-rounded {
    border-radius: 3px;
}
.heavy-rounded {
    border-radius: 8px;
}
.full-rounded {
    border-radius: 50%;
}
.barrel-rounded {
    border-radius: 20px/60px;
}

border-radius supports separate horizontal and vertical radii using /. The barrel-rounded example demonstrates this elliptical effect.

Embossed Shadows

Combining inset shadows with regular box shadows simulates embossed or debossed button effects.

Light
Heavy
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.embossed-light {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.embossed-heavy {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.3),
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 1px 1px rgba(255,255,255,0.9);
}

How it works: an inset highlight on the top edge combined with an inset darken on the bottom edge, plus a subtle drop shadow, creates the illusion of raised or indented surfaces.

References