What are the CSS box-shadow values in order?

The order is: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 4px 8px 16px 2px rgba(0,0,0,0.2). The inset keyword goes at the beginning if you want an inner shadow.

Does box-shadow affect page layout or performance?

Box-shadow doesn't affect layout — it doesn't push other elements or change the element's box model. For performance, shadows trigger repaints but are generally fast. Avoid animating box-shadow on large surfaces; filter: drop-shadow() can be GPU-accelerated instead.

How do I make a glowing effect with CSS?

Use a colored shadow with zero offset and spread: box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.6). Increase blur for a softer glow, increase spread to expand it. Multiple shadows with different colors create a neon effect.

What is neumorphism in CSS?

Neumorphism uses two shadows — one light, one dark — on the same colored background as the element, creating an embossed or debossed look. Example: box-shadow: 8px 8px 16px #b8b9be, -8px -8px 16px #ffffff. It works best on grey backgrounds.

Can I animate CSS box-shadow?

Yes, box-shadow is animatable with CSS transitions. However, animating it is expensive because it triggers repaints. For performance-critical animations (like hover effects on many cards), consider using filter: drop-shadow() or opacity transitions instead.

CSS Box Shadow: From Basics to Beautiful UI Effects (2026)

Why Box Shadow Is Worth Really Understanding

CSS box-shadow is one of those properties most developers learn just enough to get by. You copy a shadow from a design spec or find one on Stack Overflow, and it works. But when you understand what every parameter does, you unlock a surprisingly wide range of effects — from the barely-there elevation shadow on a modern card to full neumorphic UI and glowing neon buttons.

This guide goes through the fundamentals, the common UI patterns, the pitfalls, and the performance considerations. If you want to experiment as you read, the CSS Box Shadow generator at ToolPal gives you a live visual editor with copy-ready output.

The Syntax, Explained

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

Let's be precise about each parameter:

offset-x — How far the shadow is pushed horizontally. Positive values move it right; negative moves it left.

offset-y — How far the shadow is pushed vertically. Positive moves it down (standard for a light source above); negative moves it up.

blur-radius — How blurry the shadow is. 0 gives a hard edge. Higher values create softer, more diffused shadows. There's no maximum limit, though extremely high values rarely look good.

spread-radius — Expands or contracts the shadow. Positive values make the shadow larger than the element; negative values shrink it. This parameter is optional (defaults to 0).

color — The shadow color. Use rgba() or hsla() for transparency control. Pure black shadows tend to look muddy — slightly desaturated or colored shadows often look more natural.

A minimal shadow:

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

This produces a soft shadow directly below the element — the most common pattern for cards and elevated surfaces.

The `inset` Keyword

Adding inset at the beginning creates an inner shadow instead of an outer one:

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

Inset shadows are great for:

Text inputs and textareas (gives a recessed, "pressed in" look)
Pressed button states
Pill/badge backgrounds to add depth
Neumorphic "pressed" states

You can combine inset and regular shadows on the same element using a comma-separated list.

Multiple Shadows: Layering for Realism

The most underused feature of box-shadow is that you can stack multiple shadows. Separate them with commas:

.realistic-card {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.04);
}

This layered approach mimics how real shadows work — they get progressively softer and more transparent as distance increases. Using a single large shadow often looks flat or unnatural. Multiple small shadows with decreasing opacity produce something that reads as genuinely three-dimensional.

Practical UI Effects

1. Card Elevation (Material Design Style)

Google's Material Design popularized the concept of UI elements living at different "elevations" — higher elevation means a larger, more diffused shadow.

/* Elevation 1 — resting state */
.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Elevation 4 — hover state */
.card:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.2s ease;
}

The hover transition communicates interactivity — the card "lifts" toward the user.

2. Soft Shadows (Modern Minimal Design)

The trend in 2024–2026 has been softer, more diffused shadows with lower opacity. These work especially well on light backgrounds with colored tints:

.soft-card {
  background: white;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

The trick is large blur-radius combined with very low alpha values. The shadow should be nearly invisible at rest — you want it to create depth, not draw attention.

For colored shadows that match your brand:

.indigo-card {
  background: white;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);
}

3. Glow Effects for Dark Mode

Glows are just shadows with no offset, a large blur, and a saturated color:

.glow-button {
  background: #6366f1;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.8);
}

For a neon effect, stack multiple glows with different colors and sizes:

.neon-text-container {
  box-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00ff,
    0 0 40px #ff00ff,
    0 0 80px #ff00ff;
}

Glows look best on dark backgrounds. On light backgrounds, even saturated shadows tend to wash out.

4. Neumorphism

Neumorphism (sometimes called "soft UI") was a design trend that became popular around 2020. The technique uses two shadows — one light, one dark — on an element that shares the same background color as its container:

body {
  background: #e0e5ec;
}

.neumorphic-card {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    8px 8px 16px #b8c0cc,
    -8px -8px 16px #ffffff;
}

The light shadow goes top-left (simulating a light source from the upper-left), the dark shadow goes bottom-right.

For a pressed/active state, flip the shadows inward:

.neumorphic-button:active {
  box-shadow:
    inset 4px 4px 8px #b8c0cc,
    inset -4px -4px 8px #ffffff;
}

Neumorphism's limits: It only works on grey-ish backgrounds (the math of light/dark shadows breaks on dark or saturated backgrounds). It also has real accessibility problems — low contrast makes it hard to distinguish interactive elements. Use it as an aesthetic accent, not for critical UI components.

5. Sharp Shadows (Retro / Bold Design)

Removing the blur entirely gives you a sharp, offset shadow — a classic retro effect that's back in trend for bold, graphic designs:

.retro-card {
  background: white;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
}

.retro-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}

Combine with a small transform on hover to make it feel interactive. This style works great with bold typography and high-contrast color palettes.

6. Focus Ring Replacement

box-shadow is often used as a more visually polished alternative to browser default outlines for focus states:

.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

The spread-radius here (3px) creates a ring around the element without any blur or offset. This is accessible, customizable, and looks far better than default browser outlines on most designs. Just make sure the contrast ratio meets WCAG requirements.

Common Mistakes

Using pure black (#000) at full opacity: Almost always looks wrong. Real shadows have color and transparency. Start with rgba(0, 0, 0, 0.1) to rgba(0, 0, 0, 0.3) and adjust from there.

Too much blur, not enough layers: A single 0 20px 60px rgba(0,0,0,0.3) shadow often looks like a smear. Layer 2–4 shadows with increasing blur and decreasing opacity.

Ignoring the background color: Neumorphism breaks if your element's background doesn't match the container. And colored shadows only look right if you consider the background they're sitting against.

Forgetting spread-radius sign: A negative spread-radius shrinks the shadow. This is actually useful — you can create shadows that only show on one side:

/* Shadow only on bottom */
.bottom-shadow {
  box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);
}

The negative spread pulls the shadow in on the sides, leaving only the bottom visible.

Not considering reduced motion: If you're animating shadows, respect user preferences:

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: box-shadow 0.2s ease;
  }
}

Performance Considerations

box-shadow renders outside the browser's compositing layer, which means it triggers repaints when it changes. For most UI, this is totally fine. But if you're animating shadows on many elements simultaneously, or on large surfaces, it can cause jank.

Use filter: drop-shadow() for GPU acceleration:

/* box-shadow version (CPU repaint) */
.card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* filter version (can be GPU-composited) */
.card {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
}

filter: drop-shadow() has one big advantage: it works on irregular shapes and transparent elements (like SVGs and PNGs with transparency) rather than the element's bounding box.

The downside: filter: drop-shadow() doesn't support inset, multiple shadows (via comma), or spread-radius. For static shadows on standard boxes, box-shadow is simpler.

Will-change and GPU promotion:

.animated-card {
  will-change: transform;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.animated-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

Animating transform alongside box-shadow — where the transform is GPU-composited — often feels smoother because the transform part doesn't trigger layout.

The Generator Shortcut

Getting shadows right visually requires iteration. The CSS Box Shadow tool at ToolPal gives you:

Live visual preview with draggable parameters
Multiple shadow layers
Inset shadow toggle
One-click copy for the CSS property

Much faster than tweaking values in DevTools or writing values blind in your editor.

Cheat Sheet

/* Subtle card elevation */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

/* Material Design card */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Layered realistic shadow */
box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);

/* Glow effect */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);

/* Neumorphism */
box-shadow: 8px 8px 16px #b8c0cc, -8px -8px 16px #ffffff;

/* Sharp retro shadow */
box-shadow: 4px 4px 0 #000;

/* Focus ring */
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);

/* Bottom-only shadow */
box-shadow: 0 8px 8px -6px rgba(0, 0, 0, 0.3);

/* Inset pressed state */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

Wrapping Up

box-shadow is simple enough to learn in five minutes and deep enough to keep revealing tricks years into your CSS journey. The key insights:

Layer multiple shadows instead of relying on one big one
Use rgba() with low alpha values — not full-opacity black
Inset creates inner shadows for inputs and pressed states
Negative spread creates directional shadows
For performance-sensitive animations, consider filter: drop-shadow() or animate transform alongside shadow changes

The best way to internalize these patterns is to experiment. Tweak values, break things, notice what looks right and what looks off. The CSS Box Shadow generator is a good environment for that.