CSS Box Shadow Generator
Build single or layered box shadows visually with live preview. Adjust offset, blur, spread, color and opacity. Copy CSS instantly.
Layers
Presets
About CSS Box Shadow Generator
Visually design CSS box shadows for any HTML element. Add multiple shadow layers to create depth, glow effects, or inset shadows. The tool generates the box-shadow CSS property value ready to paste into your stylesheet.
Box Shadow Properties
Horizontal offset — positive moves right, negative moves left · Vertical offset — positive moves down, negative moves up · Blur radius — larger = softer edge · Spread radius — positive = larger shadow, negative = smaller · Inset — shadow appears inside the element
Frequently Asked Questions
Yes — click "Add Layer" to add additional shadows. CSS box-shadow supports multiple comma-separated values. Multiple layers let you create more complex effects like combining a soft ambient shadow with a sharp directional shadow.
An inset shadow is drawn inside the element rather than outside. It's useful for creating pressed/sunken button effects, inner glows, or depth effects inside cards and inputs.
Set horizontal and vertical offsets to 0, increase the spread and blur radius, and use a colored shadow. For example:
box-shadow: 0 0 15px 5px rgba(99, 102, 241, 0.5); creates a purple glow.No. Unlike outlines and borders, box-shadow does not affect the element's size or its position in the document flow. It is purely a visual effect that can overlap other elements.