CSS Box Shadow Generator — Offset, Blur, Spread & Inset

What this tool does

It builds a box-shadow and shows you exactly what it looks like. You set the horizontal and vertical offset, the blur, the spread and the colour, toggle inset, and the preview updates as you go — so you can find the shadow you want by eye and take the value that produced it, rather than editing numbers in a stylesheet and refreshing.

The parameters, one by one

Value	Effect
Offset X	Pushes the shadow right (negative: left).
Offset Y	Pushes the shadow down (negative: up) — this is what sets the light direction.
Blur	Softness of the edge; 0 is a hard line.
Spread	Grows (positive) or shrinks (negative) the shadow before blurring.
Colour + opacity	The shadow tint; a low-opacity black reads as a natural shadow.
Inset	Draws the shadow inside the element instead of behind it.

A note on realism

A single shadow can look flat, because real light produces a tight dark shadow near the object and a wide faint one further away. The presets here already use two layers where it helps; the same idea scales up to glows and coloured shadows by stacking comma-separated values. If a shadow looks "stuck on", the usual fix is less spread, more blur, and a lower opacity.

Performance and accessibility

box-shadow is cheap to render and does not affect layout, so it is safe for interactive elements. Unlike a filter shadow it also does not create a new stacking or blur context, which keeps it predictable. Just keep contrast in mind: a shadow should suggest depth, not replace a focus outline, and words should stay readable against whatever the shadow falls on.

Frequently asked questions

What is box-shadow?

A CSS property that draws a shadow behind an element, making it look raised from the page (or pressed in, with inset). It takes a horizontal offset, a vertical offset, a blur radius, a spread and a colour — for example 0px 4px 12px rgba(0,0,0,0.2).

What do the four numbers mean?

The first two are the offsets: how far the shadow is pushed right and down (negative for left and up). The third is the blur: how soft the edge is, from a hard line at 0 to a wide fade at larger values. The fourth is the spread: how much the shadow grows or shrinks before blurring.

When should I use inset?

Inset flips the shadow to the inside of the element, which reads as a recess or a pressed button. It is the same five values with the inset keyword in front, and it pairs well with a light top edge to suggest depth.

How do I make a soft, realistic shadow?

Real shadows are rarely a single hard blob: two layers work better — a tight, darker one close to the element and a wider, fainter one beneath it. The presets here use that pattern; the "Floating" preset is two stacked shadows whose result reads as a natural lift.

Can I stack several shadows?

Yes — box-shadow accepts a comma-separated list, and each layer is drawn in order with the first on top. That is how inset highlights, coloured glows and multi-layer lifts are built.

Is anything uploaded?

No. The value is generated in your browser and nothing is sent anywhere.

Go deeper

Longer explanations of the problems this tool solves:

Sources

CSS Backgrounds and Borders Module Level 3 — the box-shadow property (W3C).