TinyTools

🫧 DESIGN

Box Shadow Generator

Craft layered CSS box shadows with blur, spread, inset, and opacity — live card preview with CSS plus Tailwind output.

Your files are processed directly on your device and are not uploaded to our servers.

Shadow

Layer 1

Layer 2

Preview

Card preview
Dark preview

Code

CSS

.elevated {
  box-shadow: 0px 1px 2px 0px rgba(15, 23, 42, 0.08), 0px 8px 24px -4px rgba(15, 23, 42, 0.16);
}

Tailwind

shadow-[0px_1px_2px_0px_rgba(15,_23,_42,_0.08),_0px_8px_24px_-4px_rgba(15,_23,_42,_0.16)]

How to use

  1. Start from a preset or tune the default two-layer card shadow.
  2. Adjust offset, blur, spread, color, opacity, and inset per layer.
  3. Copy the CSS box-shadow or Tailwind class into your project.

FAQ

How many shadow layers can I stack?
Up to 4 layers. Real-world card and glow effects usually combine one tight ambient shadow with one large soft shadow — start from a preset and tune from there.
What do blur, spread, and opacity do?
Blur softens the edge, spread grows or shrinks the shadow shape, and opacity controls strength. Inset flips the shadow inside the element for pressed or neon effects.
How do I use the Tailwind output?
Paste the shadow-[...] class onto your element. It uses an arbitrary value with underscores instead of spaces, so no Tailwind config changes are needed.
Is my work uploaded anywhere?
No. Every shadow is computed locally in your browser. Nothing you tweak or copy ever leaves your device.

Related tools