/

Box Shadow Generator

Processed Client Side

Stack multiple box-shadow layers, tune offset, blur, spread, color, and inset, and copy the CSS. Watch every change on the live preview.

Shadow layers
Layer 1
Offset X0px
Offset Y10px
Blur30px
Spread-6px
Opacity35%
Preview & CSS
1 layer
box-shadow: 0px 10px 30px -6px rgba(79, 70, 229, 0.35);

Bookmark this tool now — skip the search next time you need it.

About Box Shadow Generator

This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.

Build a CSS box-shadow visually and copy the finished declaration. You can stack as many layers as you like, which is the part that matters — a single shadow reads as flat and slightly cheap, while two or three layered shadows at different blurs and opacities are what produces the soft, believable depth you see in well-designed interfaces. Each layer gets its own horizontal and vertical offset, blur, spread, colour, and opacity, plus an inset toggle for shadows that fall inside the element instead of outside it. The preview updates as you drag, and the generated CSS lists every layer ready to paste.

Key features

  • Stack unlimited shadow layers, each with independent settings
  • Horizontal and vertical offset, blur radius, and spread on every layer
  • Per-layer colour with an opacity control, emitted as rgba so the shadow blends properly
  • Inset toggle per layer, for inner shadows and pressed states
  • Negative spread, which is how you keep a large soft blur from bleeding out sideways
  • Live preview that updates as you drag any slider
  • Add and remove layers freely, reordering the stack as you go
  • Copy-ready CSS with every layer formatted on its own line
  • Runs entirely in your browser

How to use it

  1. Set the offset, blur, and spread for the first layer.
  2. Pick a colour and dial the opacity down — shadows almost always want to be translucent.
  3. Add a second layer with a tighter blur for the contact shadow closest to the element.
  4. Toggle Inset on any layer that should fall inside the element.
  5. Copy the generated CSS into your stylesheet.

Tips & common mistakes

  • Two layers beat one. A tight, dark, low-opacity shadow close to the element plus a wide, soft one further out is the recipe behind almost every good elevation system.
  • Pure black at high opacity is what makes a shadow look muddy. Drop the opacity to 10-25% and tint the colour toward your background hue instead.
  • Negative spread shrinks the shadow before it blurs, which keeps a large blur radius from spilling out past the sides of the element. It is the most underused value here.
  • Shadows should share a light source. Keep the vertical offset positive and the horizontal offset at or near zero across your whole UI, so everything is lit from the same direction.
  • Inset shadows are how you build pressed buttons, inputs, and wells. Combine a small inset shadow with no outer shadow for a recessed look.
  • box-shadow does not affect layout — it never changes the element size or pushes siblings around, unlike a border. That is why it is safe for hover states.
  • For an outline that follows a border-radius exactly, a zero-blur zero-offset shadow with a spread is often cleaner than a border, because it does not add to the box size.
  • Styling the same element’s background too? Build the gradient with the CSS Gradient Generator.
  • Rounding the same element’s corners? Dial it in with the Border Radius Generator.

Related tools

Browse all 19 Frontend / CSS tools

Frequently asked questions

9

Adjust the offset, blur, spread, and opacity sliders and pick a color; the box-shadow CSS and a live preview update instantly. Click Copy to use it in your stylesheet.

Yes — click "Add shadow layer" to stack shadows. All layers are combined into a single comma-separated box-shadow value, which is how you build realistic depth and glows.

Inset draws the shadow inside the element instead of outside, creating a pressed-in or inner-glow effect. Toggle it per layer.

Lower the opacity (10–30% usually looks natural) and increase the blur radius. Solid, low-blur shadows tend to look unrealistic.

Two or three. A tight dark layer close to the element plus a wide soft one further out is the recipe behind almost every convincing elevation system — a single shadow is what reads as flat.

It shrinks the shadow before the blur is applied, which stops a large blur radius from spilling out past the sides of the element. It is the most underused value in box-shadow.

Use a shadow with zero offset, zero blur, and a positive spread. Unlike a border it adds nothing to the element size, so it will not shift your layout.

No. It paints outside the box without changing the element size or moving siblings, which is why it is safe to add or change on hover without causing reflow.

Turn on Inset for the layer. An inset shadow falls inside the element, which is how pressed buttons, text inputs, and wells are built.