CSS Box Shadow Generator

Build a CSS box shadow by eye

CSS Box Shadow Generator lets you adjust a shadow with sliders and see it on a sample box straight away, instead of guessing four lengths and a colour in your stylesheet. Stack up to five layers, make any of them inset, and copy the box-shadow declaration.

The CSS is written by the page in your browser; nothing you set is uploaded or stored.

How to create a box shadow

1. Pick a preset — Subtle, Soft, Elevated, Layered or Inset — or start from the default Soft shadow.
2. Move the sliders or type values: Offset X and Y from −100 to 100 px, Blur from 0 to 200 px, Spread from −100 to 100 px.
3. Set the colour with the swatch or a HEX value, and the Opacity from 0 to 100%. Tick Inset to draw the shadow inside the box.
4. Click Add layer to copy the layer you’re editing and select the copy. Click a layer in the list to edit it, or Remove layer to delete the selected one.
5. Optionally match the preview’s box colour, background and corner radius to your design, then click Copy CSS.

How the box-shadow code is written

• One declaration: for example box-shadow: 0px 10px 30px -5px rgba(17, 24, 39, 0.25); with layers separated by commas in list order.
• Lengths in px: zero is written as 0px too, so every layer reads offset X, offset Y, blur, spread.
• Colour as rgba(): your HEX colour with the opacity as a number from 0 to 1 of at most two decimals (25% becomes 0.25).
• Preview settings stay out: box colour, background and corner radius only change the preview. A shadow follows your own element’s border-radius.

Common uses for box shadows

• Cards and panels: a soft shadow separates content from the page without a hard border.
• Menus and dialogs: a larger shadow makes an element look raised above the rest.
• Pressed states and inputs: an inset shadow makes an element look sunk into the surface.
• Rings: no blur and a positive spread draws a solid ring that follows rounded corners.

Tips for natural-looking shadows

• Keep opacity low: faint shadows usually look more natural than dark grey at full strength.
• Negative spread with large blur: pulls the shadow in from the sides so it shows mostly below the element, as in the Soft preset.
• Layer a tight and a wide shadow: it looks more like real light than one shadow. The Layered preset doubles offset and blur across five layers.
• Tint on coloured backgrounds: a dark shade of the background often blends better than black; the Color Palette Generator gives you darker shades to try.

What each box-shadow value does

Offset, blur, spread and inset

The offsets move the shadow right (positive X) or left, and down (positive Y) or up. Blur softens the edge: 0 gives a crisp copy of the outline. Spread grows the shadow on every side before blurring, or shrinks it when negative. Inset moves the shadow inside the border, and with several layers the first in the list is painted on top.

Box shadow support in browsers

box-shadow, including multiple layers, inset and rgba() colours, works in all current browsers without a prefix. Shadows are drawn outside the layout, so they never push other elements around.

CSS Box Shadow Generator: common questions