Box Shadow Generator
Stack up to 6 shadow layers, tune each one independently, and copy clean CSS or Tailwind code with one click.
How to Use the Box Shadow Generator
- Click “Add layer” to stack up to 6 shadows — select any layer in the list to edit it.
- Adjust Offset X/Y to move the shadow, then tune Blur for softness and Spread for size.
- Pick a shadow color and opacity; enable “Inset shadow” for inner-depth effects.
- Style the demo box (color, background, corner radius) to match your real component.
- Copy the result from the CSS tab, or switch to the Tailwind tab for a utility class.
About This Box Shadow Generator
The CSS box-shadow property accepts a comma-separated list of shadows, each with horizontal and vertical offsets, blur radius, spread radius, color and an optional inset keyword. Hand-writing multi-layer shadows is tedious: tiny changes in one value can dramatically alter the result. This generator gives every layer its own controls and shows the combined effect in real time.
Use the presets as starting points — from subtle “Soft” elevations to layered Material-style depth, hard “Edge” retro shadows and glowing “Neon” effects. Negative spread values are great for natural, photo-realistic shadows. The generated CSS works in every modern browser, and the Tailwind output uses arbitrary-value syntax compatible with Tailwind CSS v3+.
Box Shadow FAQ
How do I create a multi-layer box-shadow?
Click “Add layer” to stack shadows. Each layer has its own offset, blur, spread, color, opacity and inset setting. The CSS output joins all layers with commas automatically, and you can reorder layers with the arrow buttons — the first layer renders on top.
What does the spread value do in box-shadow?
Spread expands (positive) or shrinks (negative) the shadow before blurring. Positive spread makes the shadow larger than the element — useful for borders and neon glows. Negative spread pulls the shadow inward, which combined with a large blur creates soft, natural depth.
How do I make an inner (inset) shadow?
Enable the “Inset shadow” toggle on any layer. Inset shadows render inside the element, creating pressed or embossed effects. You can even mix inset and regular layers in a single box-shadow declaration.
Is the generated Tailwind class valid?
Yes. The Tailwind output uses arbitrary-value syntax like shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)] which is supported by Tailwind CSS v3 and later (including the v4 engine) with no configuration needed.
Why does my shadow look different on my own page?
Shadows are affected by the element's size, border-radius and the background behind it. Match the demo box color, corner radius and background to your real component for an accurate preview.