Skip to content
UtilKit

Box Shadow Generator

Layers
Layer 1

px

px

px

px

%

Preview

CSS

box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);

How to use

  1. 1.

    Drag the sliders, or type exact values, for the horizontal and vertical offset, blur, spread and opacity

  2. 2.

    Set the Shadow color, and turn on Inset to draw the shadow inside the element

  3. 3.

    Click Add layer to stack another shadow - the controls edit whichever layer chip is selected

  4. 4.

    Click Copy in the CSS panel and paste the declaration into your stylesheet

Common uses

  • ▸

    Designing card, button and modal shadows for a web UI

  • ▸

    Building layered shadows that give a convincing sense of depth or elevation

  • ▸

    Inset shadows for pressed buttons and recessed input fields

  • ▸

    Checking how a shadow holds up on light, dark or colored backgrounds

Similar tools

Gradient Generator

Frequently asked questions

Can I stack multiple shadows?

Yes - click Add layer to add one, up to 5. A new layer starts as a larger, softer copy of the last one (offsets and blur doubled, opacity at 60%, kept within the slider ranges), so it shows up straight away. Click a layer chip to edit that layer, or the × on the chip to remove it; the × appears once there are two or more layers. The layers are written as one comma-separated box-shadow value, and CSS paints the first layer on top, with each later layer drawn beneath the ones before it.

What is an inset shadow?

An inset shadow is drawn inside the element instead of outside it, which makes the element look pressed in or recessed. Turn on Inset to make the selected layer inset - its CSS then starts with the inset keyword.

What do blur, spread and opacity do?

Blur (0 to 100px) softens the edge of the shadow - at 0 the edge is hard. Spread (-50 to 50px) grows the shadow beyond the element, or shrinks it when negative. Opacity sets the alpha of the shadow color, which is written as rgba(): the default layer is 4px 4px 12px 0px rgba(0, 0, 0, 0.25).

Can I change the preview background color?

Yes. Set Preview background, below the shadow controls, by clicking its swatch or typing a hex, rgb() or hsl() value, to see the shadow on light, dark or colored surfaces. It changes only the preview, not the CSS.

Is my data sent to a server?

No. The shadow and its CSS are generated in your browser, and nothing is sent to a server.