How to use it
- Set the Horizontal offset and Vertical offset of the first layer. A positive vertical offset moves the shadow down.
- Raise the Blur to soften the edge, and the Spread to make the shadow larger or smaller than the box.
- Choose a Colour and an Opacity. Add more layers with Add a layer for a shadow that looks more natural.
- Copy the CSS declaration and paste it into the rule of your element.
How the value is built
The box-shadow property takes one or more shadows separated by commas. Each one is written as an optional inset keyword, the horizontal and vertical offsets, the blur radius, the spread distance and a colour. The first shadow is drawn on top of the others, and with no shadow the value is none.
The blur radius is never negative. A larger blur spreads the shadow softly over a wider area; a spread shadow grows or shrinks the shadow before the blur is applied. The opacity is written as the alpha value of an rgba colour, with at most two decimals.
box-shadow: [inset] offset-x offset-y blur spread color, ...Layers and what the editor checks
A soft, natural shadow often has two layers: a small, dark one close to the box and a larger, lighter one further out. Each layer is one shadow in the value. The editor allows up to 8 layers, the offsets and spread from -200 to 200 pixels, the blur from 0 to 200 pixels and the opacity from 0 to 100 per cent.
The preview uses the same value as the code, so what you see is what the browser draws. Very large blurs and spreads are slower to draw on an old phone, so use the smallest values that do the job.
Worked example: a card with two layers
The first layer is an offset of 0 and 4 pixels with a blur of 6 and no spread, in black at an opacity of 10 per cent. The second is an offset of 0 and 10 pixels with a blur of 20 at 15 per cent. The value is 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15).
Pasted into a card, this gives a shadow that is sharp under the card and soft further down.
Frequently asked questions
What does inset do?
An inset shadow is drawn inside the box, along its edges, as if the box were pressed in. It is useful for input fields and for a pressed button. A box can have inset and outer shadows together.
Why do the offsets have a sign?
A positive horizontal offset moves the shadow to the right and a negative one to the left. A positive vertical offset moves it down, so a shadow falling below a box has a positive value.
What is the difference between blur and spread?
Blur softens the edge of the shadow, making it fade out over a wider area. Spread makes the shadow itself larger, or smaller when negative, before it is blurred. Blur never goes below zero, but spread can.
Is the generated CSS compatible with all browsers?
The unprefixed box-shadow property, with several comma-separated layers and rgba colours, is supported by all current browsers and has been for years. The declaration can be used as it is, with no vendor prefix.
Is anything saved or sent by the editor?
No. The shadow is drawn in your browser and nothing is stored or sent to our server. Copy the CSS before you leave the page, because a reload starts again from the default shadow.
Sources
Figures and text last checked on Tuesday, November 10, 2026.