CSS Box Shadow Generator — Neumorphism, Glassmorphism & Tailwind

CSS Box Shadow Generator — Neumorphism, Glassmorphism & Tailwind Export

Build any CSS box shadow visually in seconds. Adjust offset, blur, spread, color, and opacity with live sliders — then copy as CSS, a Tailwind utility class, or a CSS variable. Switch to Neumorphism mode for soft UI effects or Glassmorphism mode for frosted glass — no other box shadow generator combines all three in a single tool.

The generated CSS is production-ready. There's nothing to install, no account required, and the tool works entirely in your browser.

How to Use This CSS Box Shadow Generator

Generating a box shadow takes three steps:

1. Adjust the sliders — drag Shift X, Shift Y, Blur, Spread, and Opacity to shape the shadow. The live preview updates instantly on the card, button, input, or circle element of your choice.
2. Pick a mode or preset — stay in Standard mode for a custom shadow, switch to Neu for neumorphism, switch to Glass for glassmorphism, or click any preset in the gallery to load a ready-made value.
3. Copy the output — click the copy icon next to CSS, Tailwind Utility, or CSS Variable to paste directly into your project. Press Shift+Enter anywhere in the tool to copy the CSS instantly.

If you switch the preview element (□ card, ▭ button, ✎ input, ○ circle), the shadow updates on that element so you can evaluate the effect in context before committing.

Box Shadow Examples

Edge case — zero offset glow:

Input:  offsetX=0, offsetY=0, blur=20px, spread=0, color=rgba(59,130,246,.5)
Output: 0 0 20px rgba(59, 130, 246, 0.5)

Zero offsets with a high blur value produce an ambient glow instead of a directional shadow — useful for buttons, badges, and neon effects.

Edge case — negative spread:

Input:  offsetX=0, offsetY=4px, blur=12px, spread=-2px
Output: 0 4px 12px -2px rgba(0,0,0,.15)

Negative spread contracts the shadow so it doesn't extend past the element's edges — the result looks more natural and less "painted on."

CSS box-shadow Syntax

The box-shadow property accepts the following parameters in order:

Multiple shadows stack by separating values with commas. The first shadow listed renders on top:

box-shadow:
  0 1px 3px rgba(0,0,0,.12),   /* tight ambient layer */
  0 10px 20px rgba(0,0,0,.08); /* diffused depth layer */

What Is Neumorphism?

Neumorphism (soft UI) creates a tactile, plastic-like 3D effect by using two opposing box shadows — one lighter than the background (highlight) and one darker (cast shadow). The element and its background must share the same base color; otherwise the effect breaks.

/* Background and element both use #e0e5ec */
box-shadow:
  -6px -6px 12px rgba(255, 255, 255, 0.8),  /* highlight top-left */
   6px  6px 12px rgba(163, 177, 198, 0.6);  /* shadow bottom-right */

The Neumorphism mode in this tool calculates both shadow values automatically from the background color you pick — lighten by ~40 for the highlight, darken by ~30 for the shadow. Switch between Flat, Pressed (inset variant), and Concave shapes.

What Is Glassmorphism?

Glassmorphism creates a frosted glass effect using a semi-transparent background, a backdrop-filter blur, and a subtle white border. The effect is only visible when placed over a colorful background or image.

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

The Glassmorphism mode renders the preview over a gradient background so you can actually see the effect. The -webkit-backdrop-filter prefix is included in the CSS export for Safari compatibility.

Tailwind Export

For every shadow, this tool generates the closest Tailwind utility class (shadow-sm through shadow-2xl, shadow-inner) and a JIT arbitrary value for custom values:

For custom values not covered by built-in classes, use the JIT arbitrary value syntax: shadow-[10px_10px_20px_rgba(30,41,59,0.15)]. Add it to theme.extend.boxShadow in tailwind.config.js for reuse across the project.

Common Mistakes with CSS Box Shadow

• Using filter: drop-shadow when you need box-shadow: drop-shadow follows the element's visible shape (including transparent PNG cutouts). box-shadow applies to the rectangular CSS box. They look identical on solid elements but produce different results on images and icons with transparency.
• Forgetting the -webkit-backdrop-filter prefix for glassmorphism: Safari requires it. Without it, backdrop-filter: blur() does nothing on iOS and macOS Safari — the frosted glass effect disappears.
• Animating box-shadow directly on hover: This triggers expensive repaint operations on every frame. Instead, animate opacity on a pseudo-element that already has the shadow, or use filter: drop-shadow inside a will-change: filter context.
• Neumorphism with low contrast: The soft color difference between the element and background that makes neumorphism attractive also makes it inaccessible. Always verify WCAG contrast ratios — neumorphism needs extra care for text and interactive elements.

Frequently Asked Questions

What is the CSS box-shadow property?

The box-shadow property adds one or more shadow effects around an element's rectangular frame. Each shadow is defined by a horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be stacked by separating values with commas — the first shadow in the list renders on top of the others.

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

box-shadow applies to the element's CSS box, including areas that are visually transparent (the bounding rectangle). filter: drop-shadow() follows the actual rendered shape of the element — so on a PNG with transparent areas, the shadow traces the visible edges. Use drop-shadow for icons and irregular shapes; use box-shadow for cards, buttons, and rectangular elements.

How do I add multiple shadows in CSS?

Separate shadow values with commas: box-shadow: shadow1, shadow2. The first value renders on top. Layering a tight low-opacity shadow (ambient) with a larger diffused one creates more realistic depth than a single shadow — this is the technique behind Material Design elevation.

Does box-shadow affect layout or performance?

Static box shadows do not affect layout (unlike outline or border — they don't shift surrounding elements) and have negligible performance impact. Animating box-shadow on hover does trigger repaints and can cause jank on complex pages. For smooth hover transitions, the recommended technique is to animate opacity on a pseudo-element that already has the target shadow applied.

How do I create a neon glow effect with CSS?

Use zero offsets, zero spread, and a high blur radius with a vivid color: box-shadow: 0 0 20px rgba(99, 102, 241, 0.7). Stacking two glows — one tight and one diffused — increases intensity: 0 0 8px rgba(99,102,241,.9), 0 0 25px rgba(99,102,241,.4). Combine with text-shadow on the label for full neon text effect.

Resources

• MDN — box-shadow — Full reference for the box-shadow property with browser compatibility table.
• Material Design — Elevation — Google's official specification for how shadows communicate elevation in Material Design 3.
• Can I Use — backdrop-filter — Up-to-date browser support table for backdrop-filter, required for glassmorphism.