🌑 CSS Box Shadow Generator with Live Preview

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 up to 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. Only the two offsets and a color are technically required; blur and spread default to 0 if you omit them.

Each value does a distinct job. The horizontal and vertical offsets move the shadow relative to the element, where positive values go right and down and 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, which is handy for tight ambient shadows or for pulling a shadow back so it peeks out evenly on all sides. 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 saturated colors read as glows or focus rings.

The inset keyword flips the shadow inward, painting it inside the element's padding box rather than outside the border. 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, a text input well, or an inner bevel. You can stack several shadows on one element by separating them with commas, and the browser paints them from the last listed shadow upward, so the first shadow in the list sits on top. Layering is how designers build realistic depth instead of a single flat smudge.

Professional design systems lean heavily on layered shadows. Google's Material Design defines roughly two dozen elevation levels, each built from three stacked shadows that mimic a key light, a fill light, and ambient occlusion, producing depth that a single shadow cannot match. A typical Material elevation looks like box-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25), 0 16px 32px rgba(0,0,0,0.20). The trick is to combine a tight, slightly darker contact shadow with one or two wider, lighter ambient shadows so the object feels grounded yet lifted.

The soft UI style known as neumorphism pushes the same idea further by using two opposing shadows on a matching background. One light shadow is offset toward the top left to simulate a light source and one dark shadow is offset toward the bottom right, which makes an element appear extruded from or pressed into a single continuous surface, for example box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff. Adding the inset keyword to both shadows produces the pressed-in variant used for active states. Glow effects use the opposite recipe: a bright color, generous blur, zero offset, and often a small spread so the halo sits evenly around the element, which is exactly how focus rings and neon buttons are built.

Box-shadow is not the only way to cast a shadow. The filter: drop-shadow() function follows the actual alpha shape of an element, so it wraps transparent PNGs, rounded corners, and irregular silhouettes rather than the rectangular bounding box that box-shadow always uses. Box-shadow is faster to paint, supports inset and spread, and accepts multiple comma-separated values, so it remains the right choice for cards, buttons, and inputs, while drop-shadow is better for logos and cut-out images. Box-shadow has near universal browser support back to early Internet Explorer, draws outside layout flow so it never affects element size or position, and respects border-radius automatically. For performance, keep the stack to roughly two to five shadows per element since each one adds paint cost, and avoid animating blur or spread directly because that forces repeated repaints; animate opacity or swap pre-baked shadow values instead.

When to use it

• Designing a subtle drop shadow for cards, buttons, modals, or dropdowns without trial-and-error in dev tools.
• Creating an inset shadow to make text inputs, toggles, or pressed buttons look recessed.
• Building realistic depth with Material Design style elevation by layering two or three stacked shadows.
• Crafting neumorphic (soft UI) elements that appear extruded from or pressed into a matching background.
• Prototyping a soft glow, neon, or focus-ring effect using a bright color with high blur and zero offset.
• Teaching or learning how each box-shadow value (offset, blur, spread, inset) changes the rendered result.

How to use the CSS Box Shadow Generator

1. Drag the horizontal and vertical offset sliders to position the shadow relative to the element.
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 transparency with the opacity slider for a natural look.
4. Toggle Inset if you want an inner shadow instead of an outer one.
5. Watch the live preview update in real time, then click Copy to grab the box-shadow CSS.
6. To layer shadows, copy this value, then paste a second comma-separated shadow after it.

Formula & method

Worked examples

What each box-shadow value controls

Shadow recipes for common UI patterns

box-shadow vs filter: drop-shadow()

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 a negative spread when you want to shrink it.
• 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.
• Relying on one heavy shadow for depth. A single dark blur looks like a smudge. Stack two or three lighter shadows at different blur radii so the element gets a tight contact shadow plus a soft ambient one.
• Forgetting that box-shadow ignores transparent shapes. box-shadow always traces the rectangular box. For a transparent PNG, rounded badge, or irregular logo, use filter: drop-shadow() so the shadow follows the visible silhouette.

Glossary

box-shadow

The CSS property that draws one or more shadows around an element box, set by offset, blur, spread, and color values.

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.

Elevation

A design-system concept where higher surfaces cast larger, softer shadows, popularized by Material Design.

Neumorphism

A soft UI style using two opposing shadows on a matching background so elements look extruded or pressed in.

Frequently asked questions