Box-shadow generator

Adjust offset, blur, spread, color, and opacity with sliders and watch a preview box update in real time. The generated CSS updates as you drag, ready to copy straight into a stylesheet.

Is my data uploaded anywhere?

No, everything runs in your browser, so there’s nothing to upload and nothing about what you build gets tracked.

What do offset, blur, and spread actually control?

Horizontal and vertical offset move the shadow away from the box: positive values push it right and down, negative values push it left and up. Blur controls how soft the shadow’s edge is, from a hard-edged silhouette at zero to a diffuse glow at higher values. Spread grows or shrinks the shadow’s shape before the blur is applied, so a positive spread makes the shadow bigger than the box on every side, and a negative spread pulls it in smaller. Color and opacity work together: pick any hex color, and the opacity slider controls how solid or faint it looks, which the tool converts into a standard rgba() value under the hood. Toggling inset flips the shadow from sitting outside the box’s edge to sitting inside it, which is how you get a pressed-in or carved-out look instead of a raised one.

How do multiple shadow layers work?

Add several layers to stack shadows the way CSS allows, comma-separating each one in the final box-shadow value. A common pattern is a tight, dark, low-opacity shadow close to the box paired with a softer, wider, lighter one further out, which reads as more natural depth than a single shadow can produce. Layers render in the order you add them, with the first layer drawn on top, matching how the browser paints comma-separated box-shadow values. You can mix inset and non-inset layers in the same stack, useful for a card that needs a subtle outer shadow and a slight inner highlight at once.

Common uses: cards and buttons that need depth, neumorphic or inset effects, or dialing in the right shadow without guessing pixel values by hand. See the MDN box-shadow reference for the full syntax and browser support, and MDN’s guide to CSS colors for how the rgba() values in the generated CSS work.