Build single or layered box shadows visually with live preview. Adjust offset, blur, spread, color and opacity. Copy CSS instantly.
Layers
4px
4px
12px
0px
20%
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.
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.
About Box Shadow Generator
The Box Shadow Generator creates CSS box-shadow declarations with a live preview. Adjust offset, blur, spread, color, and opacity to design the perfect shadow for cards, buttons, and UI elements โ then copy the ready-to-use CSS.
How to Use
Adjust the Horizontal Offset (positive = right, negative = left).
Adjust the Vertical Offset (positive = down, negative = up).
Set the Blur Radius โ higher values create softer shadows.
Set the Spread Radius โ positive expands the shadow, negative contracts it.
Choose the Shadow Color and Opacity.
Toggle Inset to make the shadow appear inside the element.
The live preview updates instantly. Click Copy CSS to copy the declaration.
How It Works
The tool generates a CSS box-shadow property string from your slider values and renders it on the preview element in real time. The output is standard CSS that works in all modern browsers.
Example
A subtle card shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
A dramatic drop shadow: box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.4);
An inset pressed effect: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
Frequently Asked Questions
Yes, CSS supports multiple box shadows by separating them with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15);. Use this tool to design each shadow, then combine them manually in your CSS.
Blur radius softens the shadow's edges โ higher values make it more diffuse. Spread radius changes the size of the shadow itself โ positive values expand it beyond the element's boundaries, negative values shrink it.
No. Box shadows are purely visual โ they do not affect document layout or the position of other elements, unlike margins or padding.
Yes. box-shadow has been fully supported in all major browsers (Chrome, Firefox, Safari, Edge) for over a decade without any vendor prefix needed.