Box Shadow Generator

The Syntax and Its Five Values

Horizontal and vertical offset come first. They move the shadow relative to the element. A positive vertical offset with zero horizontal reads as light directly overhead, which is what most interfaces assume.

Blur radius controls softness. Zero produces a hard edged duplicate of the shape. Larger values read as a more distant or more diffuse light source.

Spread grows or shrinks before blurring. It is optional and frequently omitted, which is a shame because negative spread is what stops a shadow leaking out at the sides.

Colour is last, and inset comes first if used. The order of the lengths is fixed, but the colour and the inset keyword can sit at either end. Keeping to one convention makes shadows easier to read at a glance.

How to Use This Generator

Start from a preset. Each one is already layered correctly, so it is a working shadow rather than a starting point that needs fixing.

Set the background before judging. A shadow that looks right on white can vanish on grey, so match the preview background to where the element will actually live.

Adjust the top layer for contact. Small offset, small blur, slightly stronger opacity. That is the layer doing the work of making the element look like it touches something.

Copy CSS or Tailwind. The Tailwind version writes spaces as underscores because arbitrary values cannot contain spaces, and Tailwind converts them back.

Why Layering Looks Better

One shadow is a physical impossibility. Any real surface receives light from more than one direction, so a single uniform blur is a shape the eye recognises as artificial even when it cannot say why.

Two layers is usually enough. A tight one at low offset and small blur for contact, and a wider one at greater offset and larger blur for ambient light.

Order matters, first is on top. Shadows are painted in the order written, so the tight contact shadow goes first and the wide one underneath it.

Keep the total subtle. Two layers at ten percent each read as far more convincing than one at thirty. Layering buys realism, not intensity.

Spread, the Underused Value

It resizes the shadow before the blur is applied. Positive makes it larger than the element in every direction, negative makes it smaller.

Negative spread with a downward offset is the trick. The shadow sits below the element without spilling out at the sides, which is exactly what a real one does.

Positive spread with zero blur makes a border. It is a genuine technique for a focus ring, and unlike a real border it does not affect layout at all.

Most elevation systems use it. Look at any well designed shadow scale and the higher levels almost always carry negative spread.

Inset Shadows and Inner Depth

Inset draws the shadow inside the element. Instead of the element appearing raised, it appears carved into the surface.

It is the standard treatment for inputs. A subtle inset shadow at the top of a text field reads as a recess, which is a strong signal that something can be typed into it.

Pressed states use it too. Swapping an outer shadow for an inset one on click is a convincing press without moving anything.

Neumorphism is two insets or two outsets. One light and one dark from opposite directions, on a background the same colour as the element. It looks striking and has real contrast problems, which is why it should be used carefully.

Elevation Systems

Shadows communicate hierarchy. A larger, softer shadow reads as further from the page, which is how a modal announces that it sits above everything else.

Use a scale, not arbitrary values. Four or five defined levels used consistently look designed. Individually tuned shadows on every component look like several people worked on it separately.

Offset and blur should grow together. As an element rises, its shadow moves further and softens. Growing one without the other breaks the illusion immediately.

Most interfaces need only two or three. Resting, hover and overlay covers almost everything, and more levels usually mean the hierarchy is unclear.

Shadow Colour Beyond Black

Pure black shadows look muddy. A real shadow is the absence of light on a coloured surface, not a grey film over it.

Tint towards the background hue. A shadow on a warm page reads better with a hint of that warmth in it, which is a small change with a noticeable effect.

Coloured glows are shadows too. A blue shadow at zero offset with spread is how a focus ring is usually built, and it belongs in the same tool for that reason.

Dark mode needs different shadows. A black shadow on a dark background is invisible. Dark interfaces usually convey elevation with lighter surfaces instead.

Performance and Accessibility

Large blurs are expensive. Blur cost grows with radius, so a hundred pixel blur on many elements is noticeably slower than a ten pixel one, particularly on mobile.

Animating a shadow forces repaints. Transitioning the opacity of a shadow on a pseudo element is much smoother than transitioning the shadow itself.

Never rely on a shadow alone for focus. Windows high contrast mode can drop shadows entirely, so a focus indicator built only from one disappears for the people who need it most.

Shadows are not contrast. A shadow does not make text on a card readable. The text and its background still need to meet contrast requirements on their own.

Common Mistakes to Avoid

One heavy shadow instead of two light ones. The single most common reason a shadow looks cheap.

Inconsistent light direction. If one component casts down and another casts up and to the left, the page has two suns. Pick a direction and keep it.

Shadows on everything. When every element is elevated, none of them are. Elevation only communicates when most things are flat.

Forgetting dark mode. A shadow tuned on white will do nothing on a dark background, so the dark theme needs its own treatment rather than the same values.

Frequently Asked Questions