CSS Box Shadow Examples — Generate and Customize Shadow Effects

CSS box-shadow adds drop shadows to HTML elements. A shadow can be positioned, blurred, spread, colored, and made inset. You can stack multiple shadows on one element for complex layered effects.

Use the Box Shadow Generator to build and preview box-shadow values visually.

The box-shadow syntax

box-shadow: offset-x offset-y blur-radius spread-radius color;

/* Multiple shadows: */
box-shadow: shadow1, shadow2, shadow3;

/* Inset shadow: */
box-shadow: inset offset-x offset-y blur-radius spread-radius color;

All values:

• offset-x — horizontal offset. Positive = right, negative = left.
• offset-y — vertical offset. Positive = down, negative = up.
• blur-radius — how blurry the shadow edge is. 0 = sharp edge.
• spread-radius — how much the shadow expands beyond the element’s dimensions. Optional, defaults to 0.
• color — shadow color. Accepts any CSS color value. Use rgba() for transparent shadows.
• inset — makes the shadow appear inside the element instead of outside.

Common box-shadow examples

Subtle card shadow

.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Small vertical offset (2px), slight blur (4px), low opacity (0.1 = 10%). Creates the impression of a card floating slightly above the page without being heavy.

Material Design elevation

/* Elevation 2 (low) */
.elevated-2 {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Elevation 8 (medium) */
.elevated-8 {
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.12),
    0 4px 6px rgba(0, 0, 0, 0.08);
}

/* Elevation 16 (high - modals, overlays) */
.elevated-16 {
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.12),
    0 30px 60px rgba(0, 0, 0, 0.12);
}

Material Design uses dual shadows: one for ambient light (diffuse, large blur) and one for key light (smaller, more directional).

Directional shadow

/* Shadow falls to the bottom-right (light from top-left): */
.shadow-bottom-right {
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Shadow falls downward only: */
.shadow-bottom {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Shadow on left side only: */
.shadow-left {
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.15);
}

Focus ring / outline

.button:focus {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
  outline: none;  /* Replace default outline with box-shadow */
}

0 0 0 3px means no offset and no blur — a spread-only shadow. This creates a solid colored ring around the element that looks like an outline but respects border-radius.

Inset shadow

/* Pressed button effect: */
.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Inset highlight (light from top): */
.panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Deep inset (text input on focus): */
input:focus {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

Glow effect

/* Blue glow: */
.glow-blue {
  box-shadow: 0 0 20px rgba(66, 153, 225, 0.7);
}

/* Multiple color glows: */
.glow-rainbow {
  box-shadow:
    0 0 10px rgba(255, 0, 0, 0.5),
    0 0 20px rgba(0, 255, 0, 0.5),
    0 0 40px rgba(0, 0, 255, 0.5);
}

/* Neon text sign effect: */
.neon {
  color: #fff;
  box-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa;
}

Layered / neumorphic shadows

/* Neumorphism — raised element: */
.neumorphic-raised {
  background: #e0e5ec;
  box-shadow:
    6px 6px 12px #b8bec7,
    -6px -6px 12px #ffffff;
}

/* Neumorphism — pressed element: */
.neumorphic-pressed {
  background: #e0e5ec;
  box-shadow:
    inset 6px 6px 12px #b8bec7,
    inset -6px -6px 12px #ffffff;
}

Spread radius use cases

Spread radius expands or contracts the shadow:

/* No spread (default): shadow fits element size */
box-shadow: 0 4px 8px rgba(0,0,0,0.2);

/* Positive spread: shadow larger than element */
box-shadow: 0 4px 8px 4px rgba(0,0,0,0.2);

/* Negative spread: shadow smaller than element (hidden edges) */
box-shadow: 0 8px 10px -5px rgba(0,0,0,0.3);
/* This hides the sides — shadow only visible below element */

Negative spread + large blur creates a “floating” effect where the shadow appears to fade out from below the element with no visible sides.

Shadow with border-radius

box-shadow respects border-radius. A card with border-radius: 8px will have a shadow with rounded corners:

.rounded-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Shadow follows the rounded corners */
}

For circular elements (border-radius: 50%), the shadow is also circular.

Performance considerations

box-shadow is rendered via the GPU in modern browsers and is generally performant. For animations involving box-shadow changes (hover effects):

/* Avoid: animating box-shadow on every frame causes repaints */
.button {
  transition: box-shadow 0.3s ease;
}

/* Better for performance: use filter: drop-shadow with GPU compositing */
/* But box-shadow is fine for most hover transitions */

For heavy animations, filter: drop-shadow() may be more GPU-friendly, but box-shadow is the correct choice for static and hover effects.

Related tools

• Box Shadow Generator — build box-shadow values visually
• CSS Box Shadow Guide — complete reference for box-shadow
• CSS Flexbox Guide — layout with flexbox