CSS Box-Shadow Generator

.card {
  border-radius: 16px;
  box-shadow: 0 1.5px 3px 0 rgb(32 31 29 / 0.07), 0 3px 6px 0 rgb(32 31 29 / 0.07), 0 6px 12px 0 rgb(32 31 29 / 0.07), 0 12px 24px 0 rgb(32 31 29 / 0.07), 0 24px 48px 0 rgb(32 31 29 / 0.07);
  position: relative;
  transition: translate 0.2s ease;
}

/* The hover shadow already sits on an invisible ::after; hovering only
   fades it in. Animating box-shadow itself repaints on every frame. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 3px 6px 0 rgb(32 31 29 / 0.07), 0 6px 12px 0 rgb(32 31 29 / 0.07), 0 12px 24px 0 rgb(32 31 29 / 0.07), 0 24px 48px 0 rgb(32 31 29 / 0.07), 0 48px 96px 0 rgb(32 31 29 / 0.07);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.card:hover {
  translate: 0 -2px;
}
.card:hover::after {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .card {
    background-color: #1C1F23;
    box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 0.2), 0 3px 6px 0 rgb(0 0 0 / 0.2), 0 6px 12px 0 rgb(0 0 0 / 0.2), 0 12px 24px 0 rgb(0 0 0 / 0.2), 0 24px 48px 0 rgb(0 0 0 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  }
  .card::after {
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 0.2), 0 6px 12px 0 rgb(0 0 0 / 0.2), 0 12px 24px 0 rgb(0 0 0 / 0.2), 0 24px 48px 0 rgb(0 0 0 / 0.2), 0 48px 96px 0 rgb(0 0 0 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  }
}

What does this box-shadow generator do?

It builds CSS box shadows that look good and keep working where most shadows fail: on dark pages, on hover, and across a whole design system.

• Smooth mode. Set the elevation and the number of layers, and it stacks shadows in a geometric series, short and sharp near the element, long and soft further out. That is how real light falls off.
• Shadows tinted by the page. The shadow color is a darker shade of your background instead of flat black, which avoids the grey, dirty look on colored pages.
• Light and dark previews side by side, so you see the problem before your users do.
• A dark mode version that lifts the card with a lighter surface and a hairline edge, because shadows barely show on near-black pages.
• A hover lift that doesn't repaint, using the pseudo-element pattern explained below.
• An elevation scale from sm to xl, as CSS variables or a Tailwind v4 @theme block.
• Layers mode, presets and paste: edit every layer by hand, start from Soft card, Floating, Pressed, Glow, Neumorphic or Retro, or paste a shadow you already use.

How do you create a box shadow?

1. Pick a preset, or stay in Smooth and set Elevation, Layers, Softness, Opacity per layer and Light direction.
2. Set the preview colors to match your site: page, card and dark page.
3. Switch to Layers to fine-tune any layer, or paste an existing value into Paste a box-shadow to edit it.
4. Keep Lift on hover and Add a dark mode version on if you want them in the code.
5. Copy the CSS, a Tailwind class, the Elevation scale or a drop-shadow filter.

Why do shadows disappear in dark mode?

A shadow works by darkening what is behind it, and a near-black page has almost nowhere darker to go. The same shadow that reads clearly on white can drop close to 1:1 contrast on a dark background.

The raised surface follows the same idea as Material Design's dark theme: the higher the element, the lighter its surface.

How do you animate a box shadow smoothly?

Don't transition box-shadow itself: the browser has to repaint the blur on every frame, which stutters on phones. Draw the hover shadow on an ::after pseudo-element with opacity: 0, fade it in on hover, and lift the card with translate. Opacity and translate are handled by the compositor and stay smooth. The generated CSS uses exactly this pattern, and the preview runs the same code.

What this generator does not do

• It doesn't shadow a shape, only the box. box-shadow follows the element's rectangle and border radius. For a transparent PNG, an SVG icon or text, use the drop-shadow output, which follows the visible shape but has no spread and no inset.
• It doesn't choose your dark theme colors. The raised surface is a starting point computed from your dark page color; your design system may already define one.
• It doesn't read em or rem values when you paste. Pasted shadows need pixel values, which is what almost every shadow uses.
• Neumorphism is not made accessible by the tool. It warns you: a card the same color as the page relies on the shadow alone for its edge, below the 3:1 that WCAG 1.4.11 asks of buttons and inputs.

Is it private?

Yes. Everything runs in your browser, and nothing you type or paste is sent anywhere.