CSS Box Shadow Generator — Visual Builder, Multi-Stack

Guide

About Box Shadow Generator

Build CSS box-shadows visually. Drag offset, blur, and spread sliders; pick a color (with alpha); toggle inset; stack multiple shadows for layered depth. Live preview on a sample card. Copy as CSS or as a Tailwind utility class.

What good shadows look like

Bad shadows are loud — box-shadow: 0 0 50px black over everything. Good shadows are quiet — they suggest depth without becoming a feature.

The technique pros use:

Offset down by Y, not X — light comes from above
Soft blur — blur ≈ 3-4× Y-offset for natural look
Spread carefully — usually 0 or slightly negative
Layer two — a tight close shadow + a soft wide shadow
Color with alpha — rgba(0,0,0,0.1) not solid black

Layered shadow recipe

box-shadow:
  0 1px 3px rgba(0, 0, 0, 0.05),
  0 4px 16px rgba(0, 0, 0, 0.08);

Two layers. Reads as elevated. Subtle. Used by every modern design system.

Common workflows

Card elevation. Generate a 4dp / 8dp / 16dp / 24dp ladder; map to your design tokens.

Pressed-button state. Inset shadow on :active. Subtle but felt.

Floating action button. Larger spread, tighter blur. Reads as suspended.

Modal scrim. Wide shadow with high alpha. Sets the modal apart from the page.

Why visual matters

Shadows tune by feel. Numbers in CSS don’t communicate the visual outcome. Sliding the offset bar gives the same answer faster than typing values and reloading.

Frequently asked questions

What does each parameter do?

x-offset moves the shadow horizontally; y-offset vertically; blur softens the edges; spread grows or shrinks the shadow size. Color and alpha control opacity.

When do I stack shadows?

For realistic depth. A single shadow looks 2010-flat; two or three layered shadows (a tight low-blur shadow + a wide high-blur shadow) read as physical elevation, à la Material Design.

What is inset?

Renders the shadow inside the element instead of outside. Used for inputs, pressed buttons, and inset textures.

Performance considerations?

Box-shadows are GPU-accelerated and cheap. Multiple shadows on many animated elements can cause repaint cost — for big lists, prefer pre-computed layers.

How does this differ from drop-shadow?

box-shadow is rectangular, follows the element's box. filter: drop-shadow() follows the element's visible shape (handles transparent PNGs, irregular SVGs). Different tools, different jobs.

Tailwind support?

Yes. Generate, copy as shadow-[...] arbitrary value, or pick a preset that maps to shadow-md, shadow-lg, etc.

How do I make a shadow on the bottom only?

Use a positive y-offset, zero x-offset, and a negative spread so the blur doesn't leak out the sides — e.g. box-shadow: 0 8px 8px -6px rgba(0,0,0,0.25). The negative spread pulls the shadow in horizontally, leaving it visible only below the element.

Is there a React Native equivalent?

React Native doesn't use CSS box-shadow. On iOS map the values to shadowColor, shadowOffset, shadowOpacity, and shadowRadius; on Android use elevation. Newer RN (0.76+) adds a boxShadow style prop that accepts CSS-like syntax — copy the values from here and map them across.

Related tools

Last updated: 2026-07-04