tigtools

Box Shadow Generator

Stack one or more shadow layers, adjust them with sliders and copy the finished box-shadow declaration.

Runs in your browser No sign-up

Presets
Shadow layers
Layer 1
0px
1px
2px
0px
12%
Layer 2
0px
8px
24px
-4px
18%

The first layer is drawn on top of the others.

12px

How to use it

  1. Start from a preset or adjust the first layer's offset, blur, spread, colour and opacity.
  2. Add more layers for a more natural depth, or tick “Inset” for an inner shadow.
  3. Change the preview background and box colour to match your design, then copy the CSS.

How it works

box-shadow takes, per layer: horizontal offset, vertical offset, blur radius, spread radius and colour, optionally preceded by inset. Positive offsets move the shadow right and down. Blur softens the edge and cannot be negative; spread grows (positive) or shrinks (negative) the shadow before blurring. Multiple layers are separated by commas and the first one is painted on top.

Realistic elevation usually combines a small, tight shadow with a larger, softer one at low opacity, which is what the “Elevated” preset does. Colours are written as rgba() so opacity is explicit. Shadows follow the element's border-radius and do not take up layout space, so they never move other elements.

Shadows with very large blur values on many elements can make scrolling slower on low-end phones. If you animate a shadow, it is usually smoother to fade in a pseudo-element that already has the shadow than to animate box-shadow itself.

Examples

Card on a light page

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); gives a card a crisp edge plus a soft lift.

Focus ring without layout shift

A layer with 0 offset, 0 blur and 3px spread in your brand colour draws a solid ring around a button. Unlike a border, it does not change the element's size.

Pressed input field

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) makes a text field look slightly recessed.

Frequently asked questions

What is the difference between box-shadow and filter: drop-shadow()?

box-shadow follows the element's box and border-radius and supports spread and inset. drop-shadow() follows the visible shape, including transparent areas of PNG or SVG images, but has no spread or inset.

Why is my shadow cut off?

A parent with overflow: hidden clips anything outside its box, including shadows. Add padding to the parent or move the overflow rule.

How many layers should I use?

One or two are enough for most interfaces. More layers can look smoother but cost a little more to paint, which matters on long lists.

Privacy

The CSS is generated in your browser. Nothing is uploaded or stored.