About this box shadow generator
The CSS box-shadow property draws one or more shadows around an element. Each shadow has a horizontal and vertical offset, a blur radius that softens the edge, a spread that grows or shrinks it, and a color. This generator lets you set those values with number fields and sliders, see the result on a preview shape, and copy finished code. Real-world light rarely makes a single hard shadow, so you can stack up to six layers for soft, natural depth, or switch a layer to inset to push the surface inward. Colors are written as rgba so the opacity is part of the code.
How to make a CSS box shadow
- Start from a preset or from scratch. Press a preset such as Subtle card, or edit the first shadow layer directly. Drag the preview box to move the offset by hand.
- Adjust each layer. Set the X offset, Y offset, Blur, and Spread, choose a Color, and drag Opacity. Tick Inset shadow for an inner shadow.
- Add depth. Press Add shadow layer to stack another shadow, usually a larger and fainter one. Press Remove layer to delete one.
- Press Generate CSS. Copy the box-shadow declaration or download it as a CSS file and paste it into your stylesheet.
Frequently asked questions
What is the difference between blur and spread?
Blur makes the edge of the shadow soft and does not change its size at the core. Spread makes the whole shadow bigger when positive and smaller when negative, which is how you get a shadow that sits tighter than the element.
Why use more than one shadow layer?
A small, darker shadow close to the element and a large, faint one farther away look much closer to real light than a single shadow. Most design systems use two or three layers for each elevation level.
What does an inset shadow do?
It draws the shadow inside the element instead of outside, so the surface looks pressed in. It is common for input fields and for the pressed state of buttons.
How is the color written in the code?
As rgba, with the opacity you chose as the alpha value, for example rgba(0, 0, 0, 0.2). At 100% opacity it is written as a plain hex color.
Does a box shadow take up space in the layout?
No. Shadows are drawn outside the layout box, so they never push other elements around, but a parent with overflow hidden can clip a shadow that extends beyond its edge.