Box shadow generator for a full CSS elevation scale

Five steps to a consistent shadow system

You can finish a first pass in about three minutes.

1. 1

   Pick a preset

   Start from Material Design, Soft UI, Sharp Depth, or Glow. Each preset sets every slider, so you begin with a working scale instead of a blank one.

2. 2

   Set the shadow color

   Use black for neutral depth, or a darkened tint of your surface color for a softer look. The preview updates as soon as you enter a valid 6-digit hex value.

3. 3

   Shape the curves

   Adjust blur, spread, opacity, and offset growth. Change one curve at a time and compare the first and last levels in the preview, because they show the full range.

4. 4

   Check light and dark backgrounds

   Switch the preview background. If the low levels disappear on dark, plan a dark-mode override before you ship.

5. 5

   Copy the code

   Choose CSS variables, Tailwind v4, Tailwind v3, React Native, text-shadow, or drop-shadow output, then paste the block into your project.

How a CSS box-shadow value works

Every box-shadow is a short list of values. Once you know what each one does, the sliders above stop feeling like guesswork.

box-shadow: offset-x offset-y blur-radius spread-radius color;
box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.16);

You can stack several shadows in one declaration by separating them with commas. The first shadow sits on top. Designers use this to combine a tight key shadow with a wide ambient one, which is what the layered option in the generator does.

Box shadow, drop shadow, or text shadow?

The three properties look similar but follow different shapes. Pick by what the shadow should trace.

Why one scale beats one-off shadows

Elevation is the sense that some parts of an interface sit higher than others. A raised element casts a bigger, softer, lower shadow. In a real product, the trouble starts when each developer copies a different value. After a year you have a dozen unrelated shadows, and a tooltip can end up looking heavier than the dialog behind it.

A scale fixes this by turning shadows into a short ladder of tokens. The generator grows blur on a curve, so it opens faster at higher levels, and lets opacity, spread, and offset grow at their own rates. Four to six levels cover almost every interface.

Which level goes on which component

grep -rhoE "box-shadow:[^;]+" src/ | sort | uniq -c | sort -rn

Six shadow mistakes and how to fix them

These come up again and again in code reviews.

Making shadows work in dark mode

A dark shadow needs a lighter surface to show against. On a dark background, the same values that look right on white almost vanish. Use the Dark preview button in the tool to see this for yourself, then pick one of these approaches.

Because the tool outputs CSS variables, the override is a few lines:

:root {
  --shadow-2: 0px 3px 6px 0px rgba(0, 0, 0, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-2: 0px 3px 6px 0px rgba(0, 0, 0, 0.5);
  }
}

Keep shadows fast and stable

A hover elevation that animates opacity instead of box-shadow:

.card {
  position: relative;
  box-shadow: var(--shadow-1);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-4);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

Choosing a starting preset

Every preset is a set of slider values. Change them freely after you pick one.