Box-Shadow Generator

The five numbers in a box-shadow

Each layer of a box-shadow is written as [inset] x y blur spread color, and the tool writes every part out in full, including zeros, so nothing is left to defaults:

• X offset moves the shadow right (positive) or left (negative). The slider covers −100 to 100 px.
• Y offset moves it down or up, same range. Most interfaces assume light from above, so a positive Y reads as natural.
• Blur softens the edge, 0 to 100 px on the slider. 0 is a hard copy of the box's outline.
• Spread grows or shrinks the shadow before blurring, −50 to 50 px on the slider.
• Color comes from the color picker plus an Alpha slider. Below an alpha of 1 the color is written as rgba(); at exactly 1 it is written as a hex value such as #000000.

The number boxes accept values outside the slider ranges if you type them. Blur stops at 0: CSS rejects a negative blur, and the browser would drop the whole declaration.

Example: the default, and a two-layer shadow

The tool opens with one layer at X 0, Y 10, blur 15, spread −3, black at alpha 0.20, which produces:

box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2);

The negative spread is the useful part. It shrinks the shadow by 3 px on every side before the blur, so only a faint edge shows at the left and right while the 10 px Y offset pushes most of it out below the box. The result looks like a card lifted off the page rather than one with a dark outline. Now add a second layer for a tight shadow close to the box: X 0, Y 4, blur 6, spread −4, and set both alphas to 0.10. The output becomes:

box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);

That is the same geometry and opacity as Tailwind CSS's shadow-lg. The pattern is common because one shadow alone looks either too soft or too harsh. A large, faint layer gives the sense of height, and a small, slightly darker one anchors the edge.

What the tool does not do

• No text-shadow and no filter: drop-shadow(). Drop-shadow follows the transparent parts of an image or SVG, while box-shadow always follows the box.
• No reordering. New layers are added at the bottom of the stack; to move one up, remove the layers above it and add them again.
• No presets, units other than px, or saved state. Reloading the page brings back the single default layer.
• The preview is a fixed 192 × 128 px rounded box in the page's own background color. On the dark theme, black shadows are hard to see; check the result in your own design too.

For soft-UI surfaces built from two opposing shadows, the glassmorphism and neumorphism generator does the light and dark pair for you. The border-radius generator handles the corners, which the shadow follows automatically. If you are combining a shadow with clip-path, read the CSS clip-path guide first, because a clip removes the shadow along with everything outside it.

Frequently asked questions

What is the difference between blur and spread?

Spread changes the size of the shadow shape before it is blurred: positive values grow it on every side, negative values shrink it. Blur softens the edge of that shape; per the CSS spec, the result should look like a Gaussian blur with a standard deviation of half the blur value. A blur of 0 gives a hard-edged shadow. Spread can be negative; blur cannot.

Which layer is drawn on top?

The first one. In a comma-separated box-shadow list, the first shadow is painted closest to the viewer and each later one sits underneath it. Layer 1 in this tool is the first value in the output, so it is the top layer.

What does inset do?

It moves the shadow inside the element, so the box looks pressed into the page instead of floating above it. With inset, a positive Y offset puts the dark edge along the top inside edge. You can mix inset and outer layers in one box-shadow, which is how many neumorphic and pressed-button styles are built.

Why does my shadow disappear when I clip or round the element?

Rounding is fine: box-shadow follows border-radius automatically. Clipping is not. clip-path cuts the shadow off with everything else, and overflow: hidden on a parent cuts off any part of the shadow that extends past the parent. Put the shadow on a wrapper element, or give the parent enough padding.

How do I get the same shadow as Tailwind's shadow-lg?

Use two layers. Layer 1: X 0, Y 10, blur 15, spread -3. Layer 2: X 0, Y 4, blur 6, spread -4. Both black at alpha 0.10. The output is box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1); which matches Tailwind's shadow-lg.