CSS Box Shadow Generator

What this tool does

This box-shadow generator lets you build shadows the way real interfaces actually use them: stacked. A convincing drop shadow is rarely one box-shadow value — Material Design's elevation system and most polished UI kits layer two or three shadows with different blur and opacity to fake real light falloff. This tool lets you add, tune, and stack as many shadow layers as you want, with a live preview against a background color you control, then hand you clean CSS or a Tailwind arbitrary-value class.

How to use it

• Adjust a layer's offset X/Y, blur, spread, color, and opacity with the sliders.
• Check Inset to turn a layer into an inner shadow instead of a drop shadow.
• Click Add Shadow Layer to stack another shadow on top — this is how soft, realistic depth is built.
• Change the preview background color to check how the shadow reads against light or dark surfaces.
• Try a preset — Material-style elevation levels, a flat "sticker" hard shadow, a long shadow, or soft neumorphic in/out shadows — then tweak it from there.
• Copy the generated box-shadow CSS or the Tailwind arbitrary-value class with one click.

Real-world use cases

• Giving a card or modal a soft, layered drop shadow instead of a single flat one.
• Recreating Material Design elevation levels (1 through 5) without memorizing their exact shadow values.
• Building a neumorphic (soft UI) button or panel with matching light and dark inset shadows.
• Making a colored "glow" shadow around a focused input or highlighted button.

Frequently asked questions

How do I stack multiple shadows on one element?

CSS supports comma-separated shadow layers natively — click "Add Shadow Layer" here and each one gets combined into a single comma-separated box-shadow value automatically.

What does the spread value actually do?

Spread expands or shrinks the shadow's shape before the blur is applied. Positive spread makes the shadow bigger than the element; negative spread (common for soft drop shadows) makes it smaller and tighter, so the blur doesn't creep out too far past the edges.

What's an inset shadow used for?

Inset flips the shadow to render inside the element's border instead of outside it — useful for pressed-button states, input fields, and neumorphic "carved in" effects.

Why do neumorphic shadows need two layers?

Neumorphism fakes a light source by pairing a dark shadow on one side with a light highlight on the opposite side, so the element looks like it's molded out of the same surface it sits on. That's why the neumorphic presets here always use two layers.

Does the output work with Tailwind?

Yes — the Tailwind field gives you a ready arbitrary-value class like shadow-[0px_4px_12px_...] you can paste directly into your markup.