CSS Box Shadow Generator

The box-shadow property adds one or more drop shadows to a box element. Each layer uses an X offset, Y offset, blur radius, optional spread radius, color, and opacity, and can be outer or inset.

The X offset moves the shadow right (positive) or left (negative), and the Y offset moves it down (positive) or up (negative). Zero, zero centers the shadow directly behind the box, so only blur and spread are visible.

Blur controls the softness of a shadow's edge. Zero keeps a crisp edge, while larger values spread the color out and fade it. For realistic shadows, combine a moderate blur with a low-opacity color like rgba(0,0,0,0.1).

A positive spread pushes a shadow outward and makes it larger; a negative spread pulls it inward so the shadow hugs the element. Combined with blur, spread controls whether the shadow feels tight and sharp or broad and soft.

Each layer is written as offsets blur spread color, for example box-shadow: 0 8px 20px -4px rgba(0,0,0,0.12). Add the inset keyword first to make a shadow draw inside the element, and separate multiple layers with commas.

Open the layer list and add more shadows. Each layer can have its own offset, blur, spread, color, and inset setting, and you can hide, reorder, mute, or delete them while editing — the preview updates live.

Load the Soft Card preset or the Card shadow recipe: a tight contact layer (0 2px 6px with low alpha) paired with a wide ambient layer (0 12px 28px with negative spread). Two soft layers read as depth; one thick dark layer reads as a sticker.

box-shadow traces the element's border box — a rectangle that follows border-radius — and supports spread radius and the inset keyword. text-shadow traces the outline of each glyph and takes only X and Y offsets, blur, and color. Both accept stacked comma-separated layers, with the first layer painted on top.

No. text-shadow accepts only X offset, Y offset, blur radius, and color — there is no spread radius and no inset keyword. To fake an outline, stack short zero-blur offsets (the Outline preset uses eight 1px layers), or use -webkit-text-stroke, which is a real stroke rather than a shadow.

Add more than one shadow layer and give each a low opacity with increasing blur and vertical offset. The generator combines them into a single comma-separated box-shadow rule you can paste straight into CSS.

Yes. Toggle a layer to inset to build recessed input wells, pressed buttons, or neumorphic surfaces, and the generated CSS updates live.

Modern browsers support unprefixed box-shadow universally, so the generator emits clean standard CSS without legacy prefixes.

Use the copy control in the output panel — it writes the current shadow to the clipboard exactly as shown. The same result is available as a full declaration, a CSS variable, a bare value, or a Tailwind class.