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.

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

Box Color

Radius:

Opacity

10%

Presets

Shadow Layers

Layer 1

inset

X slider

X value

Y slider

Y value

Blur slider

Blur value

Spread slider

Spread value

Color

Color value

CSS

box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1);

How to use

Adjust offset, blur, spread and colour, or pick a preset.
Add more shadow layers if you need a stacked effect.
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

Color Converter
Convert HEX, RGB, and HSL color values instantly. Preview the color and copy CSS-ready codes from a free browser-based color converter.
Gradient Generator
Build a linear, radial or conic CSS gradient with live preview. Adjust colours, direction and stops, then copy the CSS.
Color Palette Generator
Generate a coordinated colour palette from a base colour and a harmony rule such as complementary or triadic. Copy any swatch as HEX.