Skip to main content
ToolsByUs

Box Shadow Generator

Build CSS shadows and glows with up to five layers. Adjust each layer's offset, blur, spread, color and opacity, including inset shadows. Copy CSS or Tailwind classes, or download a PNG of the preview. Start with one of five presets and adapt it to your design.

Local-only

Presets

Pick a preset to set every control at once, then adjust from there.

Background color

Layers

Color 1
Color 2

A preset sets every slider in one click; Shuffle does the same with random values.

CSS

.box {
  border-radius: 16px;
  box-shadow:
    0px 1px 3px 0px rgb(11 11 18 / 0.18),
    0px 12px 28px -6px rgb(11 11 18 / 0.14);
}

Layered shadows are how a real interface gets depth: one short dark shadow for the contact edge, one wide soft one for the ambient lift. A single large shadow reads as a blur around the box rather than as light.

Tailwind classes

rounded-[16px] shadow-[0px_1px_3px_0px_rgb(11_11_18_/_0.18),0px_12px_28px_-6px_rgb(11_11_18_/_0.14)]

Arbitrary values, so every number is exact — none of these are rounded to the nearest scale step.

How does Box Shadow Generator work?

Each box-shadow layer has an offset, blur, spread, color, opacity and optional inset. A compact contact shadow and a wider ambient shadow can create depth. A glow uses brighter colors with little or no offset.

The first enabled CSS shadow is painted in front. Positive spread expands the shadow source; negative spread contracts it. Inset layers paint inside the box. Disabled layers remain editable but are excluded from exports.

The PNG renderer uses SVG filters for spread, blur, offsets and compositing. It includes inset layers and negative spread, draws the box between the outer and inner shadows, and preserves the CSS layer order.

The CSS is a complete .box rule, and Tailwind receives one exact shadow utility. Presets reset the layer values, box color, radius and preview stage. Always check your design on its intended background.

Shadow layers

layer 1  0 1px 3px 0  #0b0b12 at 18%
layer 2  0 12px 28px -6px  #0b0b12 at 14%

Generated CSS

.box {
  border-radius: 16px;
  box-shadow:
    0 1px 3px 0px rgb(11 11 18 / 0.18),
    0 12px 28px -6px rgb(11 11 18 / 0.14);
}

What options and edge cases does Box Shadow Generator support?

What each control does
ParameterTypeDefaultBehaviour & edge cases
Offset X / Ypx0 / 1Horizontal and vertical offsets of each enabled layer.
Blurpx radius3Blur radius; the SVG shadow approximation uses half this value as Gaussian deviation.
Spreadpx0Positive values expand and negative values contract the source before blur.
Colour + opacityrgb at alphadark at 18%Shadow color and opacity, including flat colors at their entered values.
InsetkeywordoffPaints inside the box and is included in the PNG output.
Layers1–5, comma separated2The first enabled layer is in front; disabled layers are excluded.
border-radiuspx16Corner radius of the box, including when all shadow layers are disabled.

Frequently asked questions

How many shadow layers should I use?

Start with a compact contact shadow and a softer ambient shadow. Add more only when they improve the result; five layers are available.

What does negative spread do?

It contracts the shadow source before blur. Positive spread expands it. Both are included in the CSS, Tailwind and PNG outputs.

How do I make a glow?

Choose a bright shadow color with zero offsets. Combine a tight stronger layer and a wider fainter layer, then check it on a dark background.

Are inset shadows included in PNG?

Yes. The PNG renderer composites inset layers inside the box and paints outer shadows behind it.

Which layer is on top?

The first enabled CSS layer is in front. The exports preserve that order.

How do I use the Tailwind output?

Copy the full class list into your markup. The shadow list uses exact arbitrary values; keep each utility as one class token.

ToolsByUs team · How we check our tools