Home › Design Tools › Box-Shadow & Border-Radius Generator

Box-Shadow & Border-Radius Generator

Set up to three box shadows and a border radius, watch them on the preview, then copy the CSS.

Shadow 1

Horizontal offset (px) Vertical offset (px) Blur (px) Spread (px) Colour Alpha (0 to 1)

Inset (shadow drawn inside the box)

Same border radius on all four corners

Radius (px)

Preview

CSS

Everything runs in your browser. Nothing you enter is sent or stored.

How it works

Each shadow is written as [inset] x y blur [spread] colour. A zero offset, blur or spread is written as 0, and spread is left out when it is zero. The colour is converted from the picker to rgba() with your alpha value. Shadows are joined with commas, with the first one on top.

Border radius is written in pixels. With four separate values, the order is top-left, top-right, bottom-right, bottom-left, as in CSS.