Box Shadow Generator
Create CSS box shadows visually. Add multiple layers, tune each parameter, and copy the code.
Shadow Layers
Preview Box
Generated CSS
How to Use the Box Shadow Generator
Click "Add Shadow Layer" to create one or more shadow definitions. Each layer has independent controls for horizontal and vertical offset, blur radius, spread radius, color, and inset mode. The preview box updates in real time.
Understanding box-shadow
The CSS box-shadow property takes one or more shadow definitions, each with the following values in order: offset-x offset-y blur-radius spread-radius color. Adding the inset keyword places the shadow inside the element.
Tips for Realistic Shadows
- Use multiple layers: a large, soft shadow for ambient light and a smaller, darker shadow for depth.
- Keep offset-x and offset-y small for a subtle, modern look.
- Use colored shadows (not pure black) for more natural results.
- Combine inset shadows with outer shadows for a pressed or neumorphic effect.
Performance Note
Box shadows are rendered by the browser's compositor and can be expensive in large quantities. Avoid animating box-shadow directly; instead, animate opacity on a pseudo-element that already has the shadow applied.