CSS Box Shadow Generator

The CSS Box Shadow Generator creates shadows for buttons, cards, modals, and any element that needs depth. Configure offset-x and offset-y (shadow direction), blur radius (softness), spread radius (shadow size), color (typically semi-transparent black or a tint of your background), and inset (inner shadow for pressed/carved effects). Stack multiple shadows for realistic depth — most professional UI shadows combine 2-3 layers (ambient + key light + rim). Preview live on a sample element; copy the complete box-shadow property ready to paste into your stylesheet.

Shadows are the primary visual tool for creating hierarchy in flat modern UI. Material Design popularized systematic elevation levels (0dp, 1dp, 2dp, 4dp, 8dp, 16dp, 24dp) with predefined shadows for each. Tailwind CSS ships with shadow-sm through shadow-2xl utilities. Custom shadows give your design personality — but are hard to get right without a visual editor. This tool makes shadows intuitive: drag sliders, see the result, match the depth to the context (subtle for resting cards, prominent for modals and tooltips).

CSS box-shadow syntax:

``css
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> [inset];
``

Example:
``css
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
``

Values explained:

- offset-x: horizontal offset. Positive = right, negative = left. 0 = no horizontal offset.
- offset-y: vertical offset. Positive = down, negative = up. Shadows typically go down (+Y) to simulate overhead light.
- blur-radius: shadow softness. 0 = sharp edge. Higher = softer and larger.
- spread-radius: shadow size change. Positive = expand, negative = contract. Default 0.
- color: shadow color, usually with alpha (rgba(), rgb() with slash, hsl()).
- inset: inner shadow instead of outer. Makes element look pressed or carved.

Realistic multi-layer shadows:

One CSS shadow looks flat. Realistic shadows use 2-3 layers:

``css
/* Material Design elevation 4 */
box-shadow:
0 2px 4px -1px rgb(0 0 0 / 0.2), /* key light (sharp) */
0 4px 5px 0 rgb(0 0 0 / 0.14), /* ambient (softer) */
0 1px 10px 0 rgb(0 0 0 / 0.12); /* spread (softest) */
``

Material Design elevations:

Shadows for different elevation levels (in dp):

- 0dp: no shadow
- 1dp: very subtle (cards at rest)
- 2dp: subtle (raised buttons)
- 4dp: medium (app bars)
- 8dp: prominent (menus, bottom sheets)
- 16dp: high (modals)
- 24dp: highest (dialogs, elevated modals)

Neumorphism:

Soft UI style using double shadows (light + dark):

``css
background: #e0e5ec;
box-shadow:
9px 9px 16px rgb(163 177 198 / 0.6), /* dark bottom-right */
-9px -9px 16px rgb(255 255 255 / 0.5); /* light top-left */
``

Inset shadow (carved effect):

``css
box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2);
``

Used for: input field focus, switched-off toggles, embossed areas.

Colored shadows:

Subtle color in shadow (matches element color) looks more natural:

``css
.button-blue {
background: #3498db;
box-shadow: 0 4px 14px rgb(52 152 219 / 0.4); /* blue-tinted shadow */
}
``

Hover state transitions:

Animate shadow for hover effect (feels like lifting):

``css
.card {
box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
transition: box-shadow 200ms ease, transform 200ms ease;
}
.card:hover {
box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
transform: translateY(-2px);
}
``

Performance:

- Animating box-shadow triggers paint, less efficient than transform/opacity.
- For high-performance animated shadows, animate a pseudo-element opacity instead.
- will-change: box-shadow can help but use sparingly (memory cost).

prefers-color-scheme:

Dark mode shadows should be different — often darker or tinted:

``css
.card {
box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
@media (prefers-color-scheme: dark) {
.card {
box-shadow: 0 4px 12px rgb(0 0 0 / 0.5);
}
}
``

box-shadow vs drop-shadow (filter): filter: drop-shadow() respects element shape (for transparent PNGs, shaped elements with clip-path). box-shadow respects the bounding box. Drop-shadow is simpler for shaped elements.

box-shadow vs text-shadow: box-shadow is for element boxes. text-shadow for text only. See CSS Text Shadow Generator.

Single shadow vs multi-layer: Single shadow looks flat. Multi-layer (key + ambient + spread) looks realistic. Professional UI uses multi-layer.

Neumorphism vs Material Design shadows: Material uses single-directional shadow for elevation. Neumorphism uses dual shadows (light + dark) for soft-UI look. Different aesthetics; Material is more universal.

box-shadow vs outline: Outline is for focus indicators. box-shadow can simulate outline (0 0 0 3px color). Outline does not take space in layout; inset shadow takes layout space. Different uses.

Colored shadow vs black shadow: Pure black shadows on colored elements can look harsh. Tinted shadows (using element color) feel more integrated. Especially for colorful elements.