CSS box shadow generator

How to use this tool

The box-shadow property takes its values in a fixed order, and knowing what each one does turns guesswork into intent:

Horizontal offset moves the shadow right (positive) or left (negative). Vertical offset moves it down or up. Blur radius controls how soft the edge is — 0 gives a hard-edged shape, higher values diffuse it. Spread grows or shrinks the shadow before blurring, which is the value most people forget exists. Colour finishes it, and is almost always best expressed with alpha transparency.

Add inset at the start and the shadow is drawn inside the element instead of outside — the standard way to make a field look recessed or a button look pressed.

Why realistic shadows use low opacity and large blur

The single biggest giveaway of an amateur shadow is opacity that is too high. Real shadows in the physical world are diffuse and subtle; a shadow at 50% black looks like a sticker, not depth. Professional interfaces overwhelmingly use something in the range of 8–25% opacity with a generous blur.

The second giveaway is a shadow with no vertical offset. Light in almost every interface is implicitly from above, so shadows should sit slightly below their element. A shadow offset only horizontally reads as wrong even to people who cannot articulate why.

Layering shadows for real depth

The technique that separates polished UI from flat UI is stacking multiple shadows in a single declaration, separated by commas. Physical objects cast both a tight, darker contact shadow right at their base and a wider, softer ambient shadow further out. Simulating both is far more convincing than one shadow trying to do everything:

box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);

Build an elevation scale from this idea — a small shadow for resting cards, a medium one for hover, a large one for modals — and apply it consistently. Consistent elevation is what makes an interface feel like a coherent system rather than a collection of screens.

Shadows, performance and dark mode

Box shadows are cheap to paint but not free, and animating them can cause repaints on every frame. If you want a lift-on-hover effect, transition transform for the movement and keep the shadow change modest — or pre-render two shadow states and cross-fade a pseudo-element, which stays on the compositor.

Dark interfaces need a different approach entirely. A black shadow on a dark background is nearly invisible, so depth has to come from elsewhere: a subtle light border on the top edge, a slightly lighter surface colour, or a coloured glow that matches your accent. That is why this site uses rim highlights and soft coloured glows rather than heavy drop shadows.

Generating an elevation scale as shadow tokens

Hand-tuning a shadow for every component is how a design drifts. Generate a small numbered scale once, in your build or token pipeline, and have components refer only to var(--shadow-2) and friends. The function below pairs a tight contact shadow with a wider ambient one at each level. Two details do most of the work: the ambient layer has a negative spread equal to the level, which stops a large blur bleeding out past the sides of a card, and the colour is a dark shade of the surface hue (slate here) rather than pure black, which turns muddy on tinted backgrounds.

// Each level = a tight contact shadow + a wide, softer ambient one.
// rgb is a dark shade of your surface hue, not pure black.
function elevation(level, rgb = '15 23 42') {
  if (level <= 0) return 'none';
  const a1 = (0.06 + level * 0.02).toFixed(2);
  const a2 = (0.04 + level * 0.03).toFixed(2);
  const contact = `0 ${level}px ${level * 2}px rgb(${rgb} / ${a1})`;
  const ambient = `0 ${level * 4}px ${level * 8}px -${level}px rgb(${rgb} / ${a2})`;
  return `${contact}, ${ambient}`;
}

const tokens = [1, 2, 3, 4]
  .map(n => `  --shadow-${n}: ${elevation(n)};`)
  .join('\n');

console.log(`:root {\n${tokens}\n}`);
// :root {
//   --shadow-1: 0 1px 2px rgb(15 23 42 / 0.08), 0 4px 8px -1px rgb(15 23 42 / 0.07);
//   ...
//   --shadow-4: 0 4px 8px rgb(15 23 42 / 0.14), 0 16px 32px -4px rgb(15 23 42 / 0.16);
// }

Two limits are worth knowing. box-shadow follows the element's border-radius but ignores transparency, so a cut-out PNG or an SVG icon gets a rectangular shadow; filter: drop-shadow() follows the alpha channel instead, though it has no spread value and no inset. And transitioning between two shadow values repaints the element on every frame. For a hover lift, put the larger shadow on a ::after pseudo-element and transition its opacity, which the browser can hand to the compositor. MDN's box-shadow reference covers the full syntax, including the stacking order: the first shadow in the list is drawn on top.