Skip to content
Restato Labs Tools
All toolsKO

Box Shadow Generator

Adjust offset, blur, spread, colour and opacity for one or more shadow layers and see the box update live. Start from a preset or build a shadow from scratch, then copy the CSS.

Preview
px
10%
Layer 1
box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1);

How to use

  1. Adjust offset, blur, spread and colour, or pick a preset.
  2. Add more shadow layers if you need a stacked effect.
  3. Copy the generated CSS.

Frequently asked questions

What does the inset option do?
It draws the shadow inside the box edges instead of outside, producing a pressed-in look.
How many shadow layers can I stack?
Up to five layers, each with its own offset, blur, spread and colour.

Privacy

Shadows are generated in your browser and are never sent to a server.

Related tools