CSS Box-Shadow Generator

How the box-shadow property works

Every CSS box-shadow follows the same grammar: offset-x offset-y blur spread color, with an optional leading inset keyword. Only the two offsets and a color are required — leave blur and spread off and they default to zero, giving a hard-edged, same-size copy of the box. This tool always writes all four lengths explicitly (for example 0px 8px 24px -4px) so the value is unambiguous when you paste it somewhere else. Positive offsets push the shadow right and down; negative ones push it left and up.

Blur and spread are different knobs

Blur is a softening radius: 0px is a crisp edge, and each pixel of blur fades the shadow over a wider band, so a large blur reads as diffuse, distant light. Spread resizes the shadow before it is blurred — a positive spread inflates it in every direction, a negative one shrinks it. The single most useful pattern is a small downward offset with a negative spread: it pulls the shadow in from the sides so only a soft pad shows beneath the element, which is the tight, floating look you see on well-made cards. The default shadow here, 0px 8px 24px -4px, is exactly that recipe.

Worked example: a two-layer card shadow

A single shadow rarely looks real, because real objects cast both a tight contact shadow and a wide ambient one. Stacking two layers is the fix. Try a dark, low-blur contact layer over a wider, lighter ambient layer:

box-shadow:
  0px 1px 2px 0px rgba(20, 23, 43, 0.28),
  0px 10px 30px -6px rgba(20, 23, 43, 0.18);

The browser paints the list front to back — the first line sits on top. Keeping each layer's alpha low (here 0.28 and 0.18) lets them add up gently instead of stacking into a muddy slab. Add and remove layers with the buttons above and the tool comma-joins them in this same order automatically.

Inset shadows: pressing things in

Prefix a shadow with inset and it is drawn inside the border box, so the element looks recessed rather than raised — the standard look for text inputs, pressed buttons and inner wells. You can freely mix inset and outer shadows in one list; a classic tactile control uses a faint light inset highlight along the top plus an outer drop shadow below.

Why alpha matters more than you think

The fastest way to make a shadow look fake is to leave it fully opaque. Real shadows are translucent, so most convincing shadows use black — or a dark version of the surface color — at only 8% to 25% opacity. That is why this tool writes shadow colors as rgba(r, g, b, a) and gives each layer its own opacity slider: on layered shadows you want each individual layer light so the total stays soft. If you need the raw color math, the Color Converter turns any HEX into rgba, and the WCAG Contrast Checker helps you keep text over a shadowed surface readable.

Making a shadow work in dark mode

A translucent black shadow all but vanishes over a dark surface — there is too little tonal room below black for the eye to register it. Two honest fixes: raise the contact layer's opacity and darkness so it still reads, or define the shape with light instead, adding a faint light-colored inset highlight along the top edge. Because you can recolor both the preview background and the element here, you can tune one shadow against a light card and a dark card before committing it to a theme.

Honest limits

This generator produces a CSS box-shadow, which follows the rectangular border box (rounded by any border-radius) — it cannot trace an arbitrary shape the way filter: drop-shadow() can for a PNG or SVG silhouette. Very large blur values on many stacked layers can cost paint performance on low-end devices, so ship the fewest layers that look right. Colors are standard 8-bit sRGB, and the preview uses a plain rounded square; your real element's radius, borders and background will subtly change how the same shadow reads, so always confirm on the actual component.