How to use the css box shadow generator
- Pick a preset to start, or adjust the first shadow directly.
- Set the horizontal and vertical offset, the blur, the spread, the color and the opacity. Tick inset to draw the shadow inside the box.
- Use Add a shadow to stack up to six layers, and remove any you do not need.
- Change the preview background, box color and corner radius to see it in context, then press Copy CSS.
Formula
box-shadow: [inset] x-offset y-offset blur spread color
Offsets and spread can be negative; blur cannot
Color is written as rgba(red, green, blue, opacity) from your hex code and percent
Several shadows are separated by commas, and the first one is drawn on top
Zero values are written without a unit, as CSS allows.
Worked example
A soft shadow with 0 horizontal and 4px vertical offset, 12px blur, no spread and black at 15% opacity is written box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);.
Two layers can look more natural: a thin shadow of 0 1px 2px at 12% and a wider one of 0 8px 24px -4px at 18%. A hard offset of 6px 6px 0 at 100% opacity gives a flat, graphic look.
What each value does
The offsets move the shadow right and down, or left and up with negative values. Blur softens the edge, and a value of 0 gives a crisp edge. Spread grows or shrinks the shadow before blurring, so a negative spread with a large offset gives a shadow that peeks out from one side only. Opacity controls how strong it looks.
Layered and inset shadows
Real light casts a tight dark shadow close to an object and a wide soft one farther away. Stacking two or three layers imitates that and often looks better than one large blur. An inset shadow sits inside the box, which suits pressed buttons and input fields. For color choices, see the color picker and check readability with the color contrast checker.
Use with other CSS tools
Combine the shadow with a CSS gradient background or a flexbox layout. Shadows are drawn outside the layout box, so they never move other elements, but they can be clipped by a parent with hidden overflow. Everything runs in your browser.
Assumptions and limits
- Output is a standard CSS box-shadow value that current browsers understand.
- Blur must be 0 to 500 pixels, offsets and spread between -500 and 500, and opacity 0 to 100 percent.
- Colors are entered as hex codes with an opacity percent, and written as rgba.
- The preview background, box color and corner radius only style the preview and are not part of the copied code.
Frequently asked questions
How do I make a CSS box shadow?
Set the offsets, blur, spread and color, then copy the box-shadow rule into your CSS. The preview shows how it will look.
How do I make a shadow on only one side?
Use a negative spread with an offset toward that side. For example, 0 8px 8px -8px gives a shadow only along the bottom.
What is the difference between blur and spread?
Blur softens the edge of the shadow, while spread makes the shadow bigger or smaller before the blur is applied.
Can I use more than one shadow?
Yes. Separate shadows with commas in one box-shadow rule. This tool lets you stack up to six layers.