CSS Box Shadow Generator
Build multi-layer shadows with live preview and copy the CSS.
box-shadow: 0px 8px 32px -4px rgba(0,0,0,0.20);
Layers (1/5)
Edit Layer
How to Use the Box Shadow Generator
- 1.Choose a preset (Soft, Deep, Glow, Layered, Inner) or start from a blank layer.
- 2.Click + Add to stack multiple shadow layers for more realistic depth effects.
- 3.Select a layer and use the sliders to adjust X offset, Y offset, blur radius, and spread.
- 4.Pick a shadow color and set opacity. Toggle Inset for inner shadows.
- 5.Use the background and card color pickers to test your shadow in context, then click Copy.
What is CSS Box Shadow?
The CSS box-shadow property adds one or more shadow effects around an element. Each shadow is defined by X offset (horizontal), Y offset (vertical), blur radius (softness), spread radius (size), and color. Positive X values push the shadow right; positive Y values push it down. Larger blur values create softer, more diffuse shadows. A positive spread makes the shadow larger than the element; negative spread creates a tighter look. The inset keyword flips the shadow to the inside. You can stack as many layers as needed, separated by commas - a common technique is combining a tight, dark primary shadow with a wide, lighter ambient shadow to simulate realistic lighting. Box shadows are rendered by the GPU and don't affect page layout.
Frequently Asked Questions
What is the difference between blur and spread in box-shadow?
Blur controls how soft/diffuse the shadow edges are - higher blur means a more gradual fade. Spread controls the overall size of the shadow before blurring - positive spread grows it, negative spread shrinks it. They are independent: a large blur with negative spread gives an atmospheric glow; no blur with positive spread gives a hard offset copy.
Does box-shadow affect layout or take up space?
No. Box shadows are visual-only and do not affect the document layout or the element's box model. Neighboring elements are not pushed by a shadow, and the shadow does not influence scrollable area. Use filter: drop-shadow() if you need a shadow that follows non-rectangular shapes.
How do I create a glow effect with box-shadow?
Set X and Y offsets to 0, use a large blur radius, set a positive spread, and choose a saturated color (e.g., rgba(99,102,241,0.6)). The "Glow" preset in this tool demonstrates this exact configuration.