# Shadow Generator

> Free CSS box-shadow generator. Stack up to six shadow layers or generate smooth, realistic shadows from elevation and sharpness, then copy CSS or a Tailwind class.

Use it online: https://pixelpapa.com/tools/shadow-generator

Realistic shadows are made of several layers: a tight, dark one close to the object and wider, softer ones further away. Edit up to six layers by hand, or use the smooth generator to build the whole stack from two sliders.

## Questions

### Why use layered box shadows instead of one?

A single box-shadow looks flat because real light produces a sharp contact shadow plus a soft, spread-out ambient one. Stacking several shadows with increasing blur and offset mimics that falloff.

### Can I use these shadows in Tailwind CSS?

Yes. The Tailwind tab outputs an arbitrary shadow class such as shadow-[0_1px_2px_rgba(0,0,0,0.06),0_8px_24px_rgba(0,0,0,0.08)] that you can paste into className.