CSS Box Shadow Generator
Dial in a box-shadow with sliders and copy the exact CSS, previewed live.
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
How to use the CSS Box Shadow Generator
- Drag the offset, blur and spread sliders to shape the shadow.
- Set the shadow colour and opacity, and toggle inset if you need it.
- Copy the generated box-shadow CSS into your stylesheet.
About the CSS Box Shadow Generator
Design a CSS box-shadow with sliders and copy the exact line when it looks right. You control the horizontal and vertical offset, which move the shadow left or right and up or down; the blur radius, which softens its edge; and the spread, which grows or shrinks the shadow relative to the box. A live preview updates as you drag, so you see every change immediately.
For colour you pick a shadow colour and set an opacity slider separately, and the tool combines the two into a single rgba() value, so a soft grey shadow at 20 percent opacity looks natural rather than a solid block. An inset toggle switches the shadow from sitting outside the box to being cut into it, which is how you make a field look recessed or a button look pressed in.
The preview sits on a checkerboard background, which is deliberate: it lets you judge a soft, semi-transparent shadow honestly, the way it would fall over any real page. One thing to know: it generates a single shadow layer, not several comma-separated shadows stacked together, and the preview shows the effect on one plain box. Pair it with the CSS gradient generator to style the box's background as well.
Frequently asked questions
What do offset, blur and spread each control?
Offset moves the shadow horizontally and vertically away from the box. Blur softens its edge, so a larger blur gives a more diffuse shadow. Spread changes the shadow size, making it larger or smaller than the box before the blur is applied.
How is the shadow colour set?
You choose a colour and set an opacity slider, and the tool combines them into a single rgba() value. That means you control both the hue and how transparent the shadow is, which is what makes a shadow look soft and natural rather than a hard block.
What does the inset option do?
It moves the shadow inside the box instead of outside it. An outer shadow makes an element appear to lift off the page; an inset shadow makes it look recessed or pressed in, which is useful for input fields, wells and pressed buttons.
Can I create more than one shadow at once?
No. This tool builds a single shadow layer. CSS does allow several comma-separated shadows on one element, but you would combine those yourself; the generator produces one clean box-shadow line at a time.
Why is the preview on a checkerboard?
The checkerboard makes it easy to judge a soft or semi-transparent shadow, because you can see how much of the background shows through. A shadow that looks fine over white might be too heavy elsewhere, and the pattern reveals that.