🌑 CSS Box Shadow Generator

What is the CSS Box Shadow Generator?

The CSS box-shadow property draws a shadow around an element’s box. A single shadow is written as five parts in this order: horizontal offset, vertical offset, blur radius, spread radius, and color, optionally preceded by the inset keyword. For example, box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.4) pushes the shadow 10px right and 10px down, softens it with 20px of blur, leaves the spread at 0, and uses a dark slate color at 40% opacity.

Each value does a distinct job. The horizontal and vertical offsets move the shadow relative to the element; positive values go right and down, negative values go left and up. The blur radius controls how soft the edge is, with 0 giving a hard edge and larger numbers giving a soft, diffuse glow. The spread radius grows (positive) or shrinks (negative) the shadow before the blur is applied. The color, usually written as rgba() or hsla() so you can control opacity, sets the tone; semi-transparent dark colors read as natural shadows, while bright colors read as glows.

The inset keyword flips the shadow inward, painting it inside the element’s border rather than outside. Outer shadows make a card or button appear to float above the page, while inset shadows make an element look recessed, like a pressed key or an input well. You can stack several shadows on one element by separating them with commas, which is how designers build layered, realistic depth. This generator focuses on a single, clean shadow you can then duplicate and tweak as needed.

When to use it

• Designing a subtle drop shadow for cards, buttons, or modals without trial-and-error in dev tools.
• Creating an inset shadow to make inputs or pressed buttons look recessed.
• Prototyping a soft glow effect by using a bright color with high blur and zero offset.
• Teaching or learning how each box-shadow value (offset, blur, spread) changes the result.

How to use the CSS Box Shadow Generator

1. Drag the horizontal and vertical offset sliders to position the shadow.
2. Adjust the blur slider to soften the edge and the spread slider to grow or shrink it.
3. Pick a shadow color and set its opacity with the opacity slider.
4. Toggle Inset if you want an inner shadow instead of an outer one.
5. Watch the live preview, then click Copy to grab the box-shadow CSS.

Formula & method

Worked examples

What each box-shadow value controls

Common mistakes to avoid

• Writing a negative blur radius. The blur radius cannot be negative. CSS treats a negative value as invalid and ignores the whole shadow, so keep blur at 0 or higher and use spread for shrinking.
• Getting the value order wrong. The order is offset-x, offset-y, blur, spread, color. Swapping offset and blur, or putting the color first, produces a different shadow or breaks the rule entirely.
• Using a fully opaque color. A solid color like #000 often looks harsh and flat. Real shadows are semi-transparent, so use rgba() with an alpha around 0.1 to 0.4 for a natural look.
• Expecting inset to push the box outward. The inset keyword paints the shadow inside the element. If you want the box to appear lifted off the page, remove inset and use an outer shadow instead.

Glossary

box-shadow

The CSS property that draws one or more shadows around an element’s box.

Offset

How far the shadow is shifted from the element, given as a horizontal and a vertical distance.

Blur radius

How far the shadow edge is softened. A value of 0 gives a sharp edge; larger values diffuse it.

Spread radius

A value that expands (positive) or contracts (negative) the shadow size before blur is applied.

Inset

A keyword that makes the shadow appear inside the element, giving a recessed or pressed look.

rgba()

A color notation taking red, green, blue, and an alpha (opacity) channel from 0 to 1.

Frequently asked questions