How to use the box shadow generator
- Start from the default shadow or press a preset.
- Move Horizontal offset and Vertical offset (positive moves the shadow right and down, negative left and up), then set Blur radius and Spread radius. Type exact numbers in the boxes, negatives included.
- Choose the Shadow color with the swatch or a hex code, and set its Opacity.
- Tick Inset shadow to draw the shadow inside the box.
- Press Add layer (up to 5) to stack shadows. Press a layer's button to edit it or Remove layer to delete it.
- Try the four Preview backgrounds, then press Copy CSS.
How the box-shadow value is built
The tool writes the box-shadow property described in CSS Backgrounds and Borders Level 3 and MDN: inset offset-x offset-y blur spread color. The offsets move the shadow. Blur softens its edge and cannot be negative. Spread grows the shadow when positive and shrinks it when negative, before the blur is applied. The color is written as rgba() from your hex code and opacity. Zeros are written as 0 and a zero spread is left out, which the syntax allows. With several layers the values are separated by commas, and the first layer is painted on top.
Worked example with the default inputs
On load the settings are Horizontal offset 0, Vertical offset 4, Blur radius 12, Spread radius 0, color #000000 and Opacity 20. The CSS code box shows exactly this:
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);The shadow sits 4px below the box, fades out over about 12px and is black at 20 percent strength, a typical soft card shadow.
Limits and edge cases
- Offsets and spread run from -100 to 100 and blur from 0 to 200. A typed number outside the range is clamped and the field tells you.
box-shadowfollows the box'sborder-radiusbut not the shape of a transparent image. Usefilter: drop-shadow()for that.- Inset shadows are clipped to the padding box and sit above the background but below the content. A parent with
overflow: hiddencan clip an outer shadow. - Neumorphism needs the box and the page to share one color. The Soft gray preview does that, and the Neumorphism preset switches to it, because a white highlight vanishes on a white page.
Frequently asked questions
What do the numbers in box-shadow mean?
In order they are the horizontal offset, the vertical offset, the blur radius and the spread radius, followed by the color. An optional inset keyword goes first. Only the two offsets are required.
How do I add a shadow to only one side of a box?
Use a negative spread equal to the blur and offset the shadow toward that side. For the bottom edge, try 0 8px 8px -8px rgba(0, 0, 0, 0.3). Set those values with the sliders and check the preview.
Can I use more than one box-shadow on an element?
Yes. Separate the shadows with commas. The first one in the list is drawn on top. Stacking a tight dark shadow with a wide faint one looks more natural than a single shadow.
What is the difference between box-shadow and drop-shadow?
The box-shadow property shadows the element's rectangular box and supports spread and inset. The drop-shadow() filter follows the visible shape of the content, such as a transparent PNG or SVG, but has no spread or inset.
How do I make an inner shadow?
Tick Inset shadow. The shadow is then drawn inside the box edge, which makes the box look pressed in. Offsets then move the shadow within the box instead of away from it.
Pair a shadow with a CSS gradient background, choose harmonious colors with the color palette generator, and compress the finished stylesheet with the CSS minifier.