CSS Box Shadow Generator & Complete Guide — Free Online Tool

Box shadows are the primary way to add depth, elevation, and visual hierarchy to web interfaces. A well-crafted shadow makes elements feel like they float above the page, guiding users' attention and reinforcing interactive affordances. A poorly chosen shadow — too dark, too blurry, or on too many elements — creates visual noise and slows down rendering.

Our free Box Shadow Generator lets you build and preview shadows visually, then copy the CSS. No signup, no ads — everything happens in your browser.

The Box-Shadow Syntax Explained

The box-shadow property accepts up to six values in a specific order:

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] [color];

• offset-x (required): Horizontal distance. Positive values push the shadow right; negative values push left.
• offset-y (required): Vertical distance. Positive pushes down; negative pushes up.
• blur-radius (optional, default 0): How much to blur the shadow. A value of 0 creates a hard-edged shadow. Higher values create softer, more diffused shadows.
• spread-radius (optional, default 0): Expands or contracts the shadow. Positive values grow the shadow larger than the element; negative values shrink it.
• color (optional): Any CSS color value. Best practice is to use rgba() or hsla() with transparency rather than solid colors.
• inset (optional): Renders the shadow inside the element instead of outside.

/* Soft outer shadow */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* Hard-edged shadow (no blur) */
box-shadow: 4px 4px 0 #000;

/* Spread shadow — larger than the element */
box-shadow: 0 0 0 4px #58a6ff;

That last example — a zero-offset, zero-blur shadow with only spread — is a popular trick for creating solid borders that do not affect layout (unlike the border property, which adds to the element's box model unless you use box-sizing: border-box).

Multiple Shadows — Layered Depth

Real-world lighting does not produce a single, uniform shadow. Objects cast multiple soft shadows at different distances. CSS lets you replicate this by separating shadow values with commas:

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.07),
  0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07),
  0 8px 16px rgba(0, 0, 0, 0.07);

This four-layer approach, where each subsequent shadow doubles in offset and blur, creates a much more realistic sense of elevation than a single shadow with a large blur. Tailwind CSS, Chakra UI, and most modern component libraries use this multi-layer pattern internally.

Shadows render in declaration order — the first shadow in the list sits on top. This matters when layering colored shadows or combining inset and outset shadows on the same element.

Inset Shadows — Inner Depth Effects

Adding the inset keyword flips the shadow to the inside of the element. The shadow renders within the padding edge, creating a pressed-in or recessed appearance:

/* Subtle inner shadow for input fields */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

/* Deep press effect for toggle buttons */
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.25);

Inset shadows are most commonly used on form inputs, toggle buttons, and neumorphic designs. You can combine inset and outset shadows on the same element to create complex depth effects:

/* Neumorphic card */
box-shadow:
  8px 8px 16px rgba(0, 0, 0, 0.2),
  -8px -8px 16px rgba(255, 255, 255, 0.05);

Material Design Elevation System

Google's Material Design specification defines a structured elevation system with 5 levels. Each level uses two or three shadow layers to simulate a key light and ambient light:

/* Elevation 1 (cards, buttons resting) */
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);

/* Elevation 2 (raised buttons, cards hover) */
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);

/* Elevation 3 (navigation bar, dialogs) */
box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);

/* Elevation 4 (menus, dropdowns) */
box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22);

/* Elevation 5 (modals, popovers) */
box-shadow: 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22);

You do not need to memorize these values — that is exactly what our box shadow generator is for. But understanding the pattern (two shadows, increasing offset and blur, moderate opacity) helps you create your own custom elevation system that fits your brand.

Sell Custom Apparel — We Handle Printing & Free Shipping

box-shadow vs. filter: drop-shadow()

CSS offers two ways to add shadows. They look similar but behave very differently:

• box-shadow: Applies to the element's rectangular box (respecting border-radius). Supports spread radius, inset keyword, and multiple layers. Does not follow the element's actual visual shape — a PNG image with transparency gets a rectangular shadow.
• filter: drop-shadow(): Follows the actual rendered shape of the element, including transparent areas in images and complex SVG paths. Does not support spread radius or inset. Uses a different syntax: filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)).

Use box-shadow for UI elements (cards, buttons, modals). Use drop-shadow() for images with transparency, icons, and SVGs where you want the shadow to follow the actual shape.

Performance Considerations

Box shadows trigger repaints but not reflows, which places them in the moderate performance category. Here is what to watch for:

• Avoid animating box-shadow directly. Changing the shadow on every animation frame is expensive. The performant alternative: place the target shadow on a ::after pseudo-element positioned behind the main element, then animate the pseudo-element's opacity from 0 to 1.
• Large blur radii are expensive. A blur-radius of 100px requires the browser to sample a much larger area than a blur of 10px. Keep blur values proportional to the element size.
• Limit shadows on scrolling lists. If you have 50+ cards in a scrolling container, each with a multi-layer shadow, rendering performance will suffer on mid-range mobile devices. Consider adding shadows only on hover or when elements enter the viewport.
• will-change: box-shadow can promote the element to its own compositing layer, which helps with animations but increases GPU memory. Use it intentionally, not globally.

Shadow Recipes You Can Copy

Here are production-tested shadow styles you can paste directly into your projects:

/* Subtle card shadow (light theme) */
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);

/* Floating card with depth */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);

/* Modal / dialog overlay */
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);

/* Glowing accent border */
box-shadow: 0 0 0 3px rgba(88,166,255,0.4);

/* Focus ring (accessibility) */
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

/* Dark theme card */
box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.1) inset;

Common Mistakes to Avoid

• Using solid black shadows: rgba(0,0,0,1) looks unnatural. Real shadows are semi-transparent. Use opacity values between 0.05 and 0.3 for most use cases.
• Shadow on every element: If everything has a shadow, nothing has emphasis. Reserve shadows for elevated elements — cards, modals, dropdowns, floating action buttons.
• Ignoring dark mode: Shadows are barely visible on dark backgrounds. Increase opacity or use a subtle light shadow (rgba(255,255,255,0.05)) combined with a brighter border instead.
• Forgetting the spread trick: A shadow with zero blur and positive spread (0 0 0 2px #color) creates a clean outline that does not affect layout — a useful alternative to borders.
• Animating the wrong way: Never put box-shadow in a CSS transition for hover effects on lists. Animate a pseudo-element's opacity instead.

Frequently Asked Questions

What is the CSS box-shadow syntax?

The box-shadow property takes offset-x, offset-y, blur-radius (optional), spread-radius (optional), and color (optional). Add the inset keyword at the start for inner shadows. Example: box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25).

How do I add multiple box shadows in CSS?

Separate multiple shadows with commas. They render in order — the first shadow is on top. This layering creates more realistic depth than a single shadow, mimicking how real light produces multiple soft shadow edges.

Do box shadows affect page performance?

Box shadows trigger repaints but not reflows, so they are moderately performant. Large blur radii and multiple shadows on many elements can slow rendering. For smooth hover animations, apply the shadow to a pseudo-element and animate its opacity instead of animating box-shadow directly.

What is the difference between box-shadow and drop-shadow?

box-shadow applies to the element's rectangular box. filter: drop-shadow() follows the actual rendered shape, including transparent areas in images and SVGs. Use box-shadow for UI elements; use drop-shadow for images with transparency.

What are Material Design shadow values?

Material Design uses a multi-layer shadow system with 5 elevation levels. Each level uses two or three shadow layers to simulate key light and ambient light. The pattern increases offset, blur, and opacity as elevation rises.

How do I create an inset shadow?

Add the inset keyword before the shadow values: box-shadow: inset 0 2px 4px rgba(0,0,0,0.3). Inset shadows render inside the element's padding edge, creating a pressed appearance commonly used for input fields and toggles.