CSS Box Shadow Generator for Card and Panel UI

You type box-shadow: 2px 2px 4px rgba(0,0,0,0.2), refresh the browser, and the shadow looks nothing like what you wanted. Too dark, too offset, bleeding off one edge. Tweak, refresh, squint, repeat.

CSS box-shadow is hard to get right in one shot because you are adjusting five independent parameters. A visual generator that updates the result as you move sliders cuts that loop out entirely.

What CSS Box-Shadow Actually Controls

The box-shadow property takes five values, and you need all of them to get predictable results.

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

Offset-x moves the shadow right (positive) or left (negative). A card shadow typically uses 0 or a small positive value like 2px.

Offset-y moves the shadow down (positive) or up (negative). Cards use a positive value because light in most UIs comes from above, casting the shadow downward.

Blur-radius controls how soft the shadow edge is. Zero blur gives a hard outline like a border. 10px blurs the shadow into a soft glow. This is usually the parameter you increase first when a shadow looks too harsh.

Spread-radius expands (positive) or contracts (negative) the shadow size before blurring. A negative spread-radius produces a tighter, more focused shadow that works well for small UI elements like buttons. A positive spread is useful for glow effects.

Color should almost always use rgba() or hsla() with an alpha channel. Solid black with opacity looks more natural than a fully opaque color because real shadows are translucent.

/* Hard outline — rarely what you want */
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);

/* Soft, natural card shadow */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

The second example skips spread-radius (defaults to 0) and uses only 2px offset-y with 8px blur. That single combination handles most card UIs.

Real Box-Shadow Values for Common UI Patterns

Different UI elements need different shadow treatments. These values work across modern browsers and scale well across screen sizes.

Card shadows

.card-subtle {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.card-default {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.card-elevated {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

Three tiers is usually enough. Subtle for stacked layouts where every shadow adds up, default for most cards, elevated for featured content or hover states.

Modal and overlay shadows

Modals need a stronger, more spread shadow because they sit above everything else on the page. A single strong shadow can look fake. Layering two shadows gives a more realistic effect.

.modal-shadow {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 16px 48px rgba(0, 0, 0, 0.25);
}

The first shadow is the tight edge shadow. The second is the broad drop shadow that makes the modal feel like it is floating above the page, not just outlined.

Button shadows

Buttons need tighter shadows than cards. A button with an 8px blur looks like it is glowing rather than pressed.

.button-raised {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.button-pressed {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

The difference between raised and pressed is 1px offset and halving the blur. That is enough to communicate interactivity without extra motion or color changes.

Input focus shadows

Focus rings are often done with outline or ring utilities, but box-shadow works too and gives you more control over color and spread.

input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

Using box-shadow for focus indicators avoids the gap between the element edge and an outline that some browsers add. The 0 offsets and 0 blur keep it a sharp ring, and the 3px spread makes it visible without being thick.

Layering Multiple Shadows

You can stack multiple shadows in a single declaration by comma-separating them. They render from front to back.

.card-layered {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.1);
}

The first line adds a thin border-replacement outline (1px spread, no blur, low opacity). The second adds a near shadow. The third adds a broad ambient shadow. The card ends up with a defined edge and visible depth, without an actual border.

Material Design uses this technique for its elevation system. Each elevation level is a stack of three shadows that get progressively broader and more transparent.

Common Mistakes When Writing Box-Shadow Values

Using px for color. This does nothing and can break the declaration. Color comes last or second-to-last depending on whether you specify inset.

Forgetting the commas in multi-shadow stacks. Missing a comma between shadow layers silently invalidates the entire stack. The browser applies none of them.

Setting blur-radius to 0 when you meant no blur. Zero blur gives a hard outline. If you want no visible shadow, either remove the declaration entirely or set all offsets to 0 with a transparent color. A zero-blur black shadow at 50% opacity is a common gotcha — it looks like a misaligned border.

Why a Visual Box-Shadow Generator Helps

The manual box-shadow process goes: type a value, save, alt-tab to the browser, refresh, examine, alt-tab back, adjust. Eight to twelve seconds per attempt, and a decent shadow takes five to ten tries.

A visual CSS box-shadow generator removes that loop. You drag sliders and see the effect on a sample element instantly. When it looks right, copy the CSS and paste it into your stylesheet.

The Toolblip CSS box shadow generator works this way. It shows a live preview of a card element, lets you adjust all five box-shadow parameters independently, and supports multi-shadow layering. You can copy the CSS with one click and paste it directly into your project.