Smooth box shadow generator

How real shadows behave

Real light sources have size, so real shadows have two parts: a dark core where the object blocks the light completely, and a soft edge where it only blocks part of it. The closer an object sits to a surface, the smaller, darker and sharper its shadow. Lift it and the shadow grows, lightens and softens.

A single CSS box-shadowcan't do both, because it is one blurred copy of the box. Make it tight and the element looks stuck to the page; make it big and soft and it looks like a vague grey cloud. The fix, popularised by Tobias Ahlin and Josh Comeau, is to stack several shadows that grow in offset and blur. The small ones build the contact shadow, the large ones the soft falloff, and together they read as one natural shadow.

How this generator builds the layers

For N layers, layer i gets a position t = i / N, passed through the easing curve. Its offset, blur and spread are your distance, blur and spread multiplied by that eased value. With ease-in (t²) and five layers, the offsets are 4%, 16%, 36%, 64% and 100% of the distance, close to the doubling sequence (1, 2, 4, 8, 16px) people often write by hand. Every layer shares one opacity, a = 1 − (1 − opacity)^1/N, so where all the layers overlap the darkness equals the opacity you set. At 18% over five layers, each layer is about 3.9%. The Card preset produces:

box-shadow:
  0 0.8px 1.6px -0.2px rgba(15, 23, 42, 0.039),
  0 3.2px 6.4px -0.6px rgba(15, 23, 42, 0.039),
  0 7.2px 14.4px -1.4px rgba(15, 23, 42, 0.039),
  0 12.8px 25.6px -2.6px rgba(15, 23, 42, 0.039),
  0 20px 40px -4px rgba(15, 23, 42, 0.039);

Ease-in gives a tight core and a long tail, which suits most UI. Ease-out bunches the layers at the large end for a hazy, diffuse look; linear and ease-in-out sit in between.

Elevation systems: one light, a few levels

A product needs a handful of elevation levels used consistently, not a new shadow per component. Higher elements get bigger, softer, slightly darker shadows; the light angle and colour never change. The presets here make a workable four-step system:

Store them as tokens (--shadow-subtle, --shadow-card and so on) next to your colour and spacing values. That is what turns a pile of styles into a design system; see design tokens for how to organise them.

Common shadow mistakes

• Grey shadows on coloured backgrounds. Tint them with the background hue instead.
• Too dark, too tight. Above roughly 30% opacity on small elements, shadows start to look heavy and dated.
• Mixed light angles. If the cards cast shadows downwards and the dropdown casts them to the side, the interface feels subtly wrong. Pick one angle for everything.
• Positive spread for big glows. It pushes the shadow out on every side. A negative spread with a large blur keeps the shadow under the element, where light would put it.
• Animating box-shadow directly. Transitioning between two multi-layer shadows on many elements can drop frames. Fade a pseudo-element instead:

.card { position: relative; box-shadow: var(--shadow-card); }
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-floating);
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.card:hover::after { opacity: 1; }

Shadows are half of what makes an interface feel tactile; the other half is colour and type. Try the CSS gradient generator for backgrounds and the fluid type scale generator for headings, or have me design the whole thing as part of my product design work.