Box Shadow Generator โ Visual Editor, Instant CSS
Multi-layer ยท Neon ยท Neumorphic ยท Tailwind ยท CSS Variable
Create any CSS box shadow with a visual editor. Sliders for all parameters, color picker with opacity. Preview on different elements. Copy CSS instantly.
Shadow renders inside the element
box-shadow: 0px 8px 24px 0px rgba(99,102,241,0.30);
box-shadow: 0px 8px 24px 0px rgba(99,102,241,0.30); shadow-[0px_8px_24px_0px_rgba(99,102,241,0.30)] --shadow-primary: 0px 8px 24px 0px rgba(99,102,241,0.30); Frequently Asked Questions
What is spread radius?
Positive spread expands the shadow beyond the element size. Negative spread shrinks it โ useful for creating focused shadows that don't bleed to sides.
How do I make a card shadow?
Use the "Card" or "Elevated" presets. A good card shadow uses small Y offset (2-4px), medium blur (8-16px), and low opacity (10-20%). Two layers (close + far) look most natural.
Can I use rgba colors?
Yes โ set the color with the color picker and adjust opacity using the Opacity slider. The output automatically uses rgba() with the correct alpha value.
What is the maximum blur value?
The slider goes to 200px, but there's no technical maximum. Very high blur values (>100px) create extremely diffuse shadows good for dramatic lighting effects.
How do I copy the shadow?
Click "๐ Copy" on the CSS tab for just the CSS value. Or use Ctrl+Shift+C to copy the active format. The "All Formats" section lets you copy any format individually.