CSS Box Shadow Generator
Updated Free mock REST & WebSocket APIs
Stack shadow layers, drag the offset pad to aim the light, and tune blur, spread and opacity on a live card. Copy plain CSS or a Tailwind arbitrary-value class.
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]
🔒 Runs in your browser. Layers listed first are painted on top.
How to create a box shadow
- Pick a preset as a starting point, or edit the default layer.
- Drag the dot on the offset pad (or use arrow keys) to set the X and Y offset, then adjust blur, spread, opacity and color. Tick Inset for an inner shadow.
- Add, duplicate, hide or reorder layers — realistic shadows usually combine a tight, darker layer with a wide, soft one.
- Match the preview background, box color and corner radius to your design, then copy the CSS or Tailwind class.
box-shadow syntax
box-shadow: [inset] x-offset y-offset [blur] [spread] color; — separate multiple shadows with commas; the first one is drawn on top.
| Value | What it does |
|---|---|
| X / Y offset | Moves the shadow right/down (negative = left/up). Light from above means a positive Y. |
| Blur | Softens the edge; can't be negative. The shadow fades over roughly the blur distance. |
| Spread | Grows (positive) or shrinks (negative) the shadow before blurring. Negative spread with a large Y keeps shadows under the element. |
| Color | Use low-opacity black or a dark tint of your background hue, e.g. rgba(15, 23, 42, 0.12). |
| inset | Draws the shadow inside the border — pressed buttons, input wells. |
Tailwind CSS shadow values
| Class | CSS |
|---|---|
shadow-sm (v3) / shadow-xs (v4) | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
shadow (v3) / shadow-sm (v4) | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) |
shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
shadow-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) |
The Card, Raised, Floating, Modal and Dramatic presets reproduce these. For anything custom, the generator gives you an arbitrary value such as shadow-[0_8px_24px_-4px_rgba(15,23,42,0.15)] — underscores replace spaces.
Performance
Large blurs on many elements, or animating box-shadow directly, can cause jank. To animate a hover lift, put the bigger shadow on a pseudo-element and transition its opacity instead.
Related tools
Embed this tool on your site
Browse all embeddable tools →Free for blogs, HR, payroll and contractor sites: copy one snippet — the widget sizes itself and matches your colors.
Get the embed code
Frequently asked questions
Is it free and private?
Yes. It's free with no sign-up, and it runs entirely in your browser — the colors you enter are never uploaded or logged.
How do I add multiple shadows?
Click + Add layer. In CSS, multiple shadows are comma-separated in one box-shadow declaration, and the first one is painted on top.
What's the difference between box-shadow and drop-shadow()?
box-shadow follows the element's box (including border-radius). filter: drop-shadow() follows the actual visible shape, including transparent PNG edges, but has no spread or inset.
Why does my shadow look gray and dirty?
Pure black at high opacity looks muddy. Use lower opacity (5–20%), several soft layers, or tint the shadow with the background hue.
Your business here? Sponsor this tool from $16/week. See placements