Can I stack multiple shadow layers?

Yes. Click "Add Shadow" to add as many layers as you want, each with independent offset, blur, spread, color, and inset settings.

What does the Inset option do?

An inset shadow renders inside the element's border rather than outside it, creating a pressed or recessed visual effect.

What does the output look like?

The output is the raw box-shadow CSS value, ready to paste into any existing CSS rule.

CSS Box Shadow Generator

Compose CSS box shadows visually by setting offset, blur, spread, color, and inset for each layer. Stack multiple layers to build complex, realistic depth effects that a single shadow cannot achieve. The output is the raw CSS value — ready to paste into any existing stylesheet rule.

Frequently Asked Questions

Can I stack multiple shadow layers?: Yes. Click "Add Shadow" to add as many layers as you want, each with independent offset, blur, spread, color, and inset settings.
What does the Inset option do?: An inset shadow renders inside the element's border rather than outside it, creating a pressed or recessed visual effect.
What does the output look like?: The output is the raw box-shadow CSS value, ready to paste into any existing CSS rule.

Related Tools

Type Scale Generator — Modular Typography Scale

Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.

Font Size Converter — pt to px to rem

Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.

Color Lightener & Darkener — Generate Tints and Shades

Generate lighter tints and darker shades of any color. See the full scale from white to black with one-click copy of HEX, RGB, or HSL values for each swatch. Free.