CSS Box Shadow Generator
Design box shadows visually with sliders. Stack multiple layers, use presets, toggle dark/light preview, and copy the CSS output.
Presets
Preview
CSS Output
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
Frequently Asked Questions
What is the box-shadow CSS property?
box-shadow attaches one or more shadow effects to an element. Each shadow is defined by horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. You can stack multiple shadows by separating them with commas.
How do I add multiple shadow layers?
Click 'Add Shadow Layer' below the existing layers. Each layer has independent controls for all shadow parameters. The final CSS output combines them into a single box-shadow declaration separated by commas.
What does the Spread Radius do?
Spread radius expands or contracts the shadow beyond the blur. A positive value makes the shadow larger than the element; a negative value shrinks it. Negative spread is commonly used with soft/floating presets to prevent the shadow from showing on the sides.
What is an inset shadow?
An inset shadow appears inside the element boundary rather than outside it. It is useful for creating pressed/sunken button effects, inner glow effects, or simulating depth inside a container.
How do I use the presets?
Click any preset button at the top (Soft, Medium, Hard, Inner, Neon Glow, Card, Floating) to instantly load that shadow configuration. You can then fine-tune the individual layer controls to adjust it to your needs.