CSS Shadow Generator

Design and copy beautiful CSS box-shadows.

100% Private: Your data never leaves your device. Processed locally in your browser.

How to Use

Adjust the sliders for horizontal and vertical offsets.
Tweak the blur radius and spread radius.
Select a shadow color and adjust the opacity.
Click 'Copy CSS' to grab the generated code for your stylesheet.

Frequently Asked Questions

What is a CSS box-shadow?

The CSS box-shadow property attaches one or more drop shadows to the frame of an element. It is commonly used for cards, modals, and buttons.

Is this cross-browser compatible?

Yes, the generated CSS code includes standard properties that are supported across all modern browsers.