CSS Box Shadow Generator
Create beautiful CSS box-shadow effects with a visual editor. Add multiple shadow layers, control blur, spread, offset, color, and opacity. Copy the CSS code to your project instantly.
Live Preview
Shadow Layers (1/6)
CSS Code
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.15);Presets
Box Shadow Properties
| Property | Description | Values |
|---|---|---|
| X Offset | Horizontal position of the shadow | Positive = right, negative = left |
| Y Offset | Vertical position of the shadow | Positive = down, negative = up |
| Blur Radius | How blurry the shadow appears | 0 = sharp edge, higher = softer |
| Spread Radius | Size increase/decrease of the shadow | Positive = larger, negative = smaller |
| Color | Shadow color with opacity | Any CSS color, usually with alpha |
| Inset | Places shadow inside the element | Optional keyword, creates inner shadow |
Related Tools
Frequently Asked Questions
How does the CSS box-shadow property work?
The box-shadow property adds shadow effects around an element. The syntax is: box-shadow: [inset] x-offset y-offset blur spread color. You can add multiple shadows separated by commas, and they stack in the order listed (first shadow on top).
What is the difference between blur and spread?
Blur radius controls how soft or sharp the shadow edge is — 0 gives a hard edge, higher values create a softer, more diffused shadow. Spread radius changes the size of the shadow — positive values make it larger than the element, negative values make it smaller. A common technique uses negative spread with positive blur for a more natural shadow.
Can I use multiple box shadows?
Yes. CSS allows multiple comma-separated shadows on a single element. This is great for creating layered, realistic shadow effects — for example, a soft ambient shadow combined with a tighter directional shadow. This tool supports up to 6 shadow layers.
What is an inset shadow?
An inset shadow appears inside the element instead of outside. It creates an inner shadow or pressed-in effect. Use it for input fields, cards with depth, or embossed UI elements. Combine inset and normal shadows for realistic effects.