logo

Developer

Box Shadow Generator

Create CSS/Tailwind box-shadow with layered control, color & opacity, inset, and realistic presets — all in your browser.

Box Shadow Generator
PopularClient-side onlyFast & private

Input

Layers 2 • radius 16px
Layer 1
Inset
Layer 2
Inset

Output

Card

Tweak layers on the left — this card updates live.

CSS
/* Example */
.card {
  box-shadow: 0px 10px 16px -4px rgba(0 0 0 / 0.180), 0px 2px 4px 0px rgba(0 0 0 / 0.100);
}
Tailwind (arbitrary)
<div className="[box-shadow:0px 10px 16px -4px rgba(0 0 0 / 0.180), 0px 2px 4px 0px rgba(0 0 0 / 0.100)]">...</div>

Uses Tailwind’s arbitrary properties ([box-shadow:...]).

How to use the Box Shadow Generator

  1. Pick a preset (Soft, Deep, Neumorphism, Glass) or add layers with Add layer.
  2. For each layer, adjust X, Y, Blur, Spread, Color & Opacity. Toggle Inset for inner shadows.
  3. Customize the card’s radius and preview background to match your design.
  4. Copy the generated CSS or Tailwind code and paste it into your project.

Tip: Use multiple subtle layers for realistic, soft shadows; use negative spread for tighter edges.