CSS Box Shadow Generator

Building one

1. Shape Layer 1 with the four sliders. Offset X and Offset Y run from -100 to 100, Blur from 0 to 200, Spread from -100 to 100, and every slider has a number box beside it if you would rather type an exact value.
2. Press + Add layer for anything with real depth, then give that layer its own Color, pull its Opacity down until the shadow stops looking painted on, and tick Inset if it should be drawn inward. Judge the result on the preview card rather than on the numbers.
3. Hit Copy CSS. What lands on the clipboard is exactly what is printed under the box-shadow label, comma-separated layers and all.

About this tool

Every box-shadow is four lengths and a color, and the quickest way to learn what each one does is to drag it. Offset X slides the shadow left or right. Offset Y moves it up or down. Blur decides how far the edge fades out. Spread grows or shrinks the shadow before any blurring happens, which is the value most people never touch. A CSS box shadow generator saves you the save-reload-squint loop: the page opens on a single layer set to 0px 4px 8px 0px #000000 and the preview card redraws while you drag.

Real depth usually needs more than one shadow. Press + Add layer and a second set of controls appears; the layers are joined with commas in list order, and the browser paints the first one nearest the top. The usual recipe is a tight darker shadow close to the element with a wide faint one sitting behind it, which is closer to how light actually falls than any single blur can manage. Layers renumber themselves as you add and remove, and the × button greys out when you are down to your last one.

Tick Inset on a layer and that shadow is drawn inside the element's box rather than around it, which is how pressed buttons, input wells and inner borders get made. Each layer has its own checkbox, so an inset highlight and an outer drop shadow can live on the same element. The finished value prints in the panel labelled box-shadow at the bottom, and Copy CSS puts exactly that text on your clipboard, unprefixed.

Good to know

• Opacity is a whole percentage per layer. At 100% the layer is written as a plain hex, and anything lower becomes rgba() with the shortest alpha the browser reads back, so 18% prints as 0.18. Colors in other notations, like hsl() or oklch(), are converted to that form rather than kept as typed.
• Lengths are always written in px, and all four are always present even when they are zero. A codebase that wants rem, or a var(--shadow-color), needs the string edited afterwards.
• Layers cannot be reordered. They stack in the order you added them, so changing which shadow sits nearest the top means removing the later one and adding it again.
• The sliders stop at 100px of offset either way and 200px of blur. Type a number past either end and the shadow uses the nearest end instead, with a note saying so, and the field takes that value once you leave it.
• box-shadow traces the border box and its border-radius, never the artwork inside. A transparent PNG gets a rectangular shadow around the whole image, which is the job filter: drop-shadow() exists to do.