Box Shadow Generator: Layered CSS Shadows, Live Preview

How CSS box-shadow works

The box-shadow property draws one or more shadows around an element. The CSS Backgrounds and Borders Module Level 3 specification describes each shadow as two to four lengths, an optional color and an optional inset keyword:

Syntax

box-shadow: [inset] x y [blur] [spread] [color];

Example

box-shadow: 0 12px 28px -6px rgba(16, 24, 40, 0.16);

X and Y offset: a positive x moves the shadow to the right, a negative one to the left. A positive y moves it down, a negative one up. With both at 0 the shadow sits evenly around the box, which is how glows and rings work.
Blur radius: 0 gives a hard edge, larger values a softer, wider fade. Negative values are invalid. The specification asks browsers for a result close to a Gaussian blur with a standard deviation of half the blur radius, so a 20px blur fades out over roughly 20px on each side of the edge.
Spread: a positive spread grows the shadow in every direction before it is blurred, a negative one shrinks it. Spread with no blur and no offset draws a solid outline that does not take up space, a handy trick for focus rings.
Color: when it is missing, the shadow uses currentColor, the text color of the element. Most shadows look best in a see-through color, which is why this box shadow generator has its own opacity slider.
Inset: turns the shadow inward, so it is drawn inside the padding edge, as if the box were pressed into the page.

A few details explain results that can look surprising. The shadow follows the rounded corners of the box, and spread makes those corners larger. An outer shadow is drawn only outside the border edge, so you never see it through a transparent background. And shadows do not affect layout: they take up no space, never cause scrollbars and can overlap neighboring content.

Why layered shadows look more natural

Separate shadows are written as a comma-separated list, and the first one is painted on top. Layering is the main trick behind shadows that look natural. A single dark, blurry shadow tends to look like a gray smudge. Two or more layers can describe the light better:

A tight contact shadow with a small offset, little blur and low opacity anchors the box to the surface right underneath it.
A wide ambient shadow with a bigger offset and a large blur suggests distance. A negative spread keeps it from showing too much at the sides.
Several stacked layers that double in offset and blur each time, like the Layered preset, give a smooth falloff that a single shadow cannot produce.

Keep the light source consistent across a design: if cards cast their shadows down, so should buttons and menus. Larger offsets and blur read as higher elevation, which is a simple way to show that a menu floats above a card and a dialog above everything.

Choosing a shadow color

Pure black at high opacity looks heavy on light backgrounds. A dark color from the same family as the background, like a deep blue gray at 5% to 20% opacity, blends in more softly. On dark backgrounds a dark shadow is hard to see at all, so depth can come from a slightly lighter card instead, or from a glow in a bright accent color like the Neon glow preset. Try your shadow on the actual background color you use: the Background and Card fields above exist for exactly that.

Inset shadows, rings and one-sided shadows

Inner shadow: an inset layer with a small y offset makes a field or a well look pressed in, as in the Inner preset.
Ring: 0 0 0 3px with no blur draws a solid ring outside the border. Two rings, a light one inside a colored one, give a focus style that stays visible on any background, like the Focus ring preset.
Hard offset: blur 0 with an x and y offset draws a solid copy of the box behind it, a look that suits playful and brutalist designs.
One side only: 0 8px 8px -8px shows a shadow under the box only, because the negative spread pulls the sides in as far as the blur reaches out. The Bottom only preset uses a 12px offset for a little more depth.

box-shadow or filter: drop-shadow()?

box-shadow always follows the box. The CSS filter drop-shadow() instead uses the alpha mask of the content, so a transparent PNG, an SVG icon or a speech bubble with a tail gets a shadow in its own shape. According to the Filter Effects specification it takes no spread, only one shadow per function, and its blur value is a standard deviation rather than a blur radius. Use box-shadow for cards, buttons and panels, and drop-shadow() for irregular shapes.

How to use the box shadow generator

1Start from a preset, or edit Layer 1 directly.
2Drag the dot in the offset pad or use the sliders to set the X and Y offset, then the blur and spread. Type exact numbers into the fields when you need them.
3Pick a color and an opacity, and switch between Outside and Inset.
4Add layers for depth, reorder them with the arrows, and remove the ones you do not need.
5Set the background, card color and corners to match your design, then copy the CSS code, the Tailwind class or a link that opens this exact shadow.

Built by Tobias Kurth, designer. Updated October 12, 2026.

Frequently asked questions

What do the numbers in box-shadow mean?

In order: the horizontal offset, the vertical offset, the blur radius and the spread distance, followed by a color and the optional inset keyword. A positive x moves the shadow right and a positive y moves it down. Blur softens the edge and cannot be negative. Spread grows the shadow in every direction, or shrinks it when negative. Blur and spread are optional, and a missing color falls back to the text color, currentColor.

Which layer is on top when I use several shadows?

The first one. Shadows are listed with commas, and the CSS Backgrounds and Borders specification paints the first shadow on top and each following one behind it. In this generator, Layer 1 is the first shadow in the code. Use the arrows to move a layer up or down.

Does box-shadow change the size or position of the element?

No. A shadow never takes up space in the layout, so it does not push other elements away, and it does not create scrollbars. It can overlap the content next to it. If you need room for a large shadow, add margin or padding to the parent yourself.

Why does my shadow not show through a see-through card?

Because an outer shadow is only drawn outside the border edge of the box. The browser clips it away inside the box, so a transparent or semi-transparent background shows what is behind the element, not its own shadow. An inset shadow is the opposite: it is drawn only inside the padding edge.

How do I make a shadow on one side only?

Use a negative spread that cancels the blur on the sides, and an offset toward the side you want. 0 8px 8px -8px puts a soft shadow below the box only: the spread pulls the sides 8px inward, so the 8px blur ends at the edges, while the 8px vertical offset pushes the bottom out. Swap the sign of the offset for a shadow on top, or move it to x for the left or right side.

How do I use the shadow in Tailwind CSS?

Copy the Tailwind class. It puts the whole value into an arbitrary value, like shadow-[0_4px_12px_rgba(0,0,0,0.15)], with underscores in place of spaces; Tailwind turns them back into spaces when it builds your CSS. The generator writes it for one layer or many, including inset layers.

What is the difference between box-shadow and filter: drop-shadow()?

box-shadow follows the rectangle of the box and its rounded corners. drop-shadow() follows the visible shape of the content, so a transparent PNG or an SVG icon gets a shadow in its own outline. drop-shadow() takes no spread, no inset and only one shadow per function. Its third length is a standard deviation, not a blur radius, and box-shadow blurs with a standard deviation of half its blur radius, so the same number gives a softer shadow in drop-shadow().