CSS box-shadow generator

Move the sliders and instantly see how the shadow of a box, card or button looks. Combine several layers for more realistic shadows or start from one of the examples, and copy the box-shadow code for your CSS.

Box shadow

Box color

Background color

Rounded corners:

Examples:

Shadow layers

Horizontal offset

Vertical offset

Blur

Spread

Color

Opacity

Inner shadow (inset)

CSS code

How box-shadow works

The box-shadow property takes up to four lengths and a color: horizontal and vertical offset (negative to the left and up), blur (0 = sharp edge), spread (grows or, if negative, shrinks the shadow) and the color, usually black with transparency (rgba(0, 0, 0, 0.2)). With the inset keyword the shadow is drawn inside the box.

Several shadows can be chained, separated by commas. The most realistic shadows combine a short, sharp shadow with a larger, diffuse one, as Material Design and most design systems do.

box-shadow tricks

A shadow with no offset or blur and some spread (0 0 0 4px) draws an outline that takes up no space, ideal for the focus state of buttons and fields. Neumorphism uses two opposite shadows, a light one and a dark one, on a background of the same color as the box.

Shadows do not affect layout or element size, but very large, diffuse shadows on many elements can slow down scrolling on mobile. To shadow the outline of a transparent PNG use filter: drop-shadow(), and for text, text-shadow.