Help / Box Shadow Generator
Box Shadow Generator Guide
What it does
The Box Shadow Generator builds layered box-shadow values with a live preview on sample elements so you can see depth before touching production CSS. Toggle inset shadows, adjust offset, blur, spread, and color, and watch the sample card respond instantly. Export CSS or Tailwind classes for drop-in use in your project — all preview rendering runs locally in your browser.
When to use it
- Defining elevation levels for cards, buttons, and modals in a design system
- Creating subtle depth on flat UI without heavy borders
- Designing pressed or sunken inset states for toggles and input fields
- Prototyping hover elevation changes before implementing in CSS
- Generating shadow tokens to paste into Tailwind or CSS variable files
How to use it
- Tune horizontal offset, vertical offset, blur, and spread with the sliders.
- Pick shadow color and opacity to match your light source direction.
- Enable inset mode for pressed, recessed, or input-field effects.
- Watch the live preview update on the sample card as you adjust values.
- Copy the generated CSS rule or Tailwind arbitrary value from the export panel.
Tips
- Use low blur and small vertical offset for subtle Material-style elevation on cards.
- Stack multiple shadow layers in your stylesheet by comma-separating values for richer depth.
- Inset shadows pair well with lighter top borders to simulate a concave surface.
- Keep shadow opacity under 25% on light backgrounds to avoid muddy edges.
FAQ
Can I stack multiple shadows?
The generator produces one shadow layer at a time. Duplicate and comma-separate rules in CSS for multi-layer stacks.
Does inset work everywhere?
Yes. Inset box-shadow is widely supported in all modern browsers.
Can I export for Tailwind?
Yes. Copy the Tailwind arbitrary shadow value directly from the export panel.
Is anything sent to a server?
No. Preview and export happen entirely in your browser. Shadow values are computed locally as you adjust sliders.