CSS Box-Shadow & Border Generator

Design a shadow and border visually, then copy the generated CSS.

Box shadow

Offset X

Offset Y

Blur

Spread

Color Opacity

Inset Add second shadow layer

Border

Width

Style Color

Link all corners

Radius

Preview

Generated CSS

How to use this tool

Adjust the sliders to shape a box-shadow and border/border-radius. The preview and the generated CSS on the right update instantly — copy it straight into your stylesheet.

Frequently asked questions

Can I create a layered (multiple) box-shadow?

Yes — toggle on the second shadow layer to combine two shadows (for example a soft ambient shadow plus a tighter, darker one), which is valid CSS by separating box-shadow values with a comma.

Can I set different border-radius values per corner?

Yes — untick "link all corners" to set the top-left, top-right, bottom-right, and bottom-left radius independently.