Click any preset to apply
Getting box-shadow right by hand is tedious — guessing pixel values, pasting into a stylesheet, and reloading to check. This free CSS box shadow generator lets you build single or multi-layer shadows visually, with a live preview that updates as you drag. Adjust offset, blur, spread, color, and opacity for each layer independently.
When you're done, copy the shadow in any format — plain CSS, a CSS custom property, SCSS variable, React inline style, or a Tailwind config snippet. No sign-up, no watermarks, completely free.
Stack as many shadow layers as you need. Toggle visibility or delete individual layers without losing your work on others.
See your shadow on a square, rounded box, circle, card, or button shape against light, white, dark, or gradient backgrounds.
CSS property, CSS custom property (:root variable), SCSS variable, React inline style, and Tailwind config block.
Toggle inset per layer to create pressed button states, inner glows, and recessed surface effects.
Instantly see the CSS filter version for SVGs and PNGs with automatic warnings when inset or spread values are excluded.
Soft lift, neumorphic, glow effects, layered depth, flat neon, and more — apply in one click and customise from there.
Help other designers discover free tools by sharing your experience on Trustpilot.