Box Shadow Generator Guide

How to use this tool

1. Start from a preset or tune the X, Y, blur, spread, color, and opacity controls.
2. Add a second layer when one shadow looks too flat or too harsh.
3. Copy CSS, Tailwind-style output, or a CSS variable for your component.

Real examples

• Soft card: low opacity, medium blur, negative spread.
• Floating modal: larger Y offset and a broad second layer.
• Inset input: enable inset for a pressed or recessed surface.

Common use cases

• Create reusable card elevation tokens for a design system.
• Preview a hover shadow before shipping a button or menu.
• Convert visual shadow tuning into copy-ready CSS variables.

Use layered shadows

Pair a small close shadow with a larger soft shadow to create depth without making the card look dirty or heavy.

Control the spread

Negative spread tightens the shadow and keeps it from bleeding too far. Positive spread makes the shape feel larger.

Match the background

A shadow that works on a light canvas may feel too weak on a dark canvas. Test the same shadow on your real UI background.

Sample input/output

• Input: Y 20px, blur 48px, spread -18px, opacity 35%.
• Output: box-shadow: 0 20px 48px -18px rgba(15, 23, 42, .35);
• Use: apply it to cards, modals, popovers, or image containers.

Common errors and fixes

• Shadow looks muddy: lower opacity or use negative spread.
• Shadow is clipped: check parent overflow: hidden and spacing.
• Tailwind value is hard to read: keep complex layers in a CSS variable.

Edge cases / errors

• Inset shadows render inside the element, not outside it.
• Large blur values can be expensive on very large animated elements.
• Dark UI often needs lighter, lower-opacity shadows plus borders.