What are the shadow properties?

Horizontal offset moves the shadow left/right. Vertical offset moves it up/down. Blur radius softens the edges. Spread grows or shrinks the shadow. Color sets the shadow color and opacity.

What is an inset shadow?

An inset shadow appears inside the element rather than outside. It creates a pressed or recessed effect.

Why stack multiple shadows?

Multiple shadow layers create more realistic depth. A common pattern is a tight, dark shadow for definition plus a large, soft shadow for ambient occlusion.

Does the CSS work in all browsers?

The box-shadow property is supported in all modern browsers.

design shadows. copy css.

build CSS box shadows visually. adjust offset, blur, spread, color, and inset. stack up to 4 shadows.

Horizontal Offset5px

Vertical Offset5px

Blur Radius10px

Spread Radius0px

Color

Inset

css

box-shadow: 5px 5px 10px 0px #00000040;

What this tool does

Build a CSS box-shadow visually — adjust offset, blur, spread, color, and stack multiple shadows for complex effects. Live preview, ready-to-paste CSS.

The five box-shadow values

css

box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
            ↑    ↑    ↑    ↑    ↑
            X    Y    blur spread color

X offset — horizontal shadow position. Positive values push right; negative push left. Usually 0 for shadows that simulate overhead lighting.
Y offset — vertical shadow position. Positive values push down. Most realistic shadows have a small positive Y because the assumed light source is slightly above.
Blur — softness of the shadow edge. Higher values produce a softer, larger-spread shadow. Subtle UI shadows use 4-12px; dramatic drop shadows use 24px+.
Spread— extends or contracts the shadow boundary before blurring. Negative spread shrinks the shadow inside the element's edge — useful for creating an inset glow effect.
Color — usually a low-alpha black or near-black for natural shadows. RGBA with 0.05-0.15 alpha is the sweet spot for subtle UI shadows.

The shadow recipe most apps use

Modern UI design favors layered shadows that simulate ambient and directional light separately:

css

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.06),
  0 4px 12px rgba(0, 0, 0, 0.08);

The first shadow is tight and contained — simulating ambient occlusion at the contact point. The second is soft and broad — simulating ambient light scattering. Together they read as more natural than any single shadow at the same total visual weight.

The inset keyword

Adding inset before the values renders the shadow inside the element rather than outside, creating a pressed-in appearance. Useful for input fields that should look recessed, or for buttons in a pressed state.

css

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

Performance: not all shadows are cheap

Box-shadows are rendered by the browser's compositor, and very large blur values on large elements can cost real frame time on lower-end devices. If you see frame drops during scrolling or animations, oversized shadows on hero elements are a common culprit.

Practical guidance: keep blur under 30px for elements that animate or appear inside scroll containers. Use larger shadows only on static decorative elements.

Stacking shadows for depth

Multiple shadows separated by commas render in order from top (closest to element) to bottom (farthest). To simulate elevation, stack a tight shadow with low opacity over a soft larger shadow with even lower opacity. The combined effect reads as three-dimensional depth.