Skip to contentSellstamp
Get started

Box shadow generator

Design a CSS box-shadow with up to five layers (offset, blur, spread, colour and inset), see it live, and copy the CSS.

Shadow 1

Any CSS colour, e.g. rgb(0 0 0 / 0.25).

Stays on your device

Everything runs in your browser. Nothing you type is sent to Sellstamp or anyone else.

Building something to sell?

Sellstamp has a storefront, a checkout into your own payment account, automatic delivery and an API with webhooks. Open a free store

How to use it

  1. Set the offset, blur, spread and colour.
  2. Add more layers for a softer, more realistic shadow.
  3. Copy the CSS.

Nothing you paste leaves this page

The conversion runs in this browser tab. Nothing is sent to Sellstamp or anyone else, which matters for configuration files, customer exports and tokens.

Why layers

Real shadows are softer near the object and fade with distance. Two or three layers, a tight dark one and a wide faint one, look more natural than one large blur. A negative spread pulls the shadow in so it shows mostly below the element.

Questions

What does spread do?

Grows (positive) or shrinks (negative) the shadow before it is blurred.

What is an inset shadow?

A shadow drawn inside the element, as if it were pressed in.

Do shadows slow pages down?

Large blurs on many elements can make scrolling slower on weak phones. Keep blur radii modest.

Can I use any colour?

Yes, any CSS colour; a semi-transparent black such as rgb(0 0 0 / 0.2) looks most natural.

Related tools

Popular free tools

All developer toolsEvery free tool