Offset
The first value moves the shadow horizontally and the second vertically. Positive values move right or down; negative values move left or up.
Web CSS Tool
CSS Box Shadow Generator & Preview
Design CSS shadows without guessing
A good interface shadow often combines a broad, faint ambient layer with a smaller directional layer. This generator lets you edit each layer separately and combines them into one valid, comma-separated declaration. Use positive or negative offsets, soften edges with blur, expand or contract the footprint with spread, and switch any layer to an inner shadow with inset.
The preview and CSS update locally as you work. No shadow settings or copied code are sent anywhere.
Advertisement
Live preview
Preview cardLayered shadow in real time
Runs locallyNo uploadsCopy-ready CSS
Generated CSS
Shadow controls
Select a layer to edit it. Layers are painted front to back in the listed order.
Quick presets
How CSS box-shadow values work
box-shadow: x-offset y-offset blur-radius spread-radius color inset;
Blur and spread
Blur softens the edge and must be zero or positive. Spread grows a positive shadow or contracts a negative one before blur is applied.
Color and inset
Alpha controls visual strength. Add inset to paint inside the border box; omit it for the usual outer shadow.
Syntax reference: W3C CSS Backgrounds and Borders Module. The generator uses pixels, rounds values consistently, and permits up to eight layers to keep output manageable.
Practical shadow tips
Natural elevation
Combine a wide, low-opacity ambient layer with a smaller, slightly darker directional layer. Soft shadows usually look more convincing than one very dark edge.
Performance
Large blurred shadows and many animated layers can be expensive to paint. Keep motion restrained and test scrolling on the devices your site supports.
Clipping
Shadows do not change layout size. Leave visual breathing room and check ancestor overflow or clipping rules when a shadow disappears.
CSS box shadow FAQ
What do the four length values mean?
They are horizontal offset, vertical offset, blur radius, and spread radius. The blur radius cannot be negative; spread and offsets can be.
How do I create multiple box shadows?
Separate each shadow with a comma. Add or duplicate layers here and the generator will assemble the comma-separated value automatically.
What does inset do?
inset paints the shadow inside the element. It is useful for pressed buttons, recessed panels, form fields, and subtle inner highlights.
Does a box shadow affect layout?
No. It is painted without changing the element’s calculated width or height, though nearby content can visually overlap it.
Why is my shadow cut off?
Check ancestors for overflow: hidden, overflow: clip, clipping paths, or insufficient visible space around the element.
Are my settings uploaded or stored?
No. The tool runs entirely in your browser and does not upload or store your shadow settings.