How to use the CSS Box Shadow Generator
- Adjust the controls.
- Preview the shadow.
- Copy the CSS declaration.
Frequently Asked Questions
Is the CSS generated live?
Yes.
Does it require an API?
No.
Can I paste it into a stylesheet?
Yes.
Shadows that look natural
Subtle shadows look more professional than heavy ones. Try a small vertical offset, a generous blur and low opacity, for example a 4 to 12 pixel offset with 10 to 20 percent black. Layering two soft shadows often looks better than one strong one.
Copy the declaration into your stylesheet. Remember that very large blur values can slow rendering on low-end phones when many elements use them, so use them sparingly on long lists.