Utilore

Box Shadow Generator

Move the sliders and the sample changes with them. Stack layers when one shadow is not enough — that is how the soft, believable depth of real interfaces is made.

Layers

Presets

How to use

  1. Choose what you are shadowing: a block or text.
  2. Set the offset, blur and colour — the sample redraws instantly.
  3. Add a layer if you need depth: two or three faint shadows read better than one heavy one.
  4. Copy the CSS line under the controls.

Good to know

Why text shadow has fewer settings

The text-shadow property takes only offset, blur and colour. Spread and the inner mode belong to box-shadow alone, and one extra value makes the whole declaration invalid — the browser drops it silently and the shadow simply disappears. Switching to text mode hides those two controls instead of hoping they will be ignored.

Several faint layers beat one heavy one

A real shadow is not uniform: it is dense right under the object and dissolves as it moves away. One shadow with a big blur gives a grey halo, while two or three layers with different offsets and low opacity give the depth you see in well-made interfaces. The tool keeps every layer separate, and the copied line lists them in order.

Frequently asked questions

What does spread do?

It grows or shrinks the shadow before the blur is applied. A negative value pulls the shadow in, so it does not stick out on the sides — that is the trick behind the tidy shadows on cards, where the glow should stay under the block rather than around it.

How do I make an inner shadow?

Tick «Inner shadow» — the keyword inset appears at the start of the line and the shadow moves inside the block. It is used for pressed buttons and input fields, where the depth should read as a dent, not as a lift.

Why is my shadow invisible?

Most often the opacity is at zero, or the offset and blur are both zero, so the shadow hides exactly behind the block. It also disappears if the element has overflow: hidden on its parent and the shadow falls outside the visible area.

Will it work in every browser?

Yes. Both box-shadow and text-shadow have been standard for years and need no prefixes; the values this tool produces are plain CSS with no vendor extensions.

Related tools