Key Features
Independent X offset, Y offset, blur, and spread sliders with live updates
Stack multiple shadow layers — the technique behind premium card depth
Per-layer color with alpha support and an inset / outer toggle
Six curated presets: Subtle Card, Material, Neon Glow, Hard Offset, Layered Depth, Soft Inset
Light and dark preview backgrounds to check both themes
One-click copy of the final box-shadow declaration
How to Use
1Pick a preset or start from scratch and drag the offset, blur, and spread sliders
2Set the layer color and alpha, and toggle inset for inner shadows
3Add or duplicate layers to stack depth effects
4Copy the generated box-shadow CSS into your stylesheet
Common Use Cases
Design consistent card elevation across a design system without guessing values
Recreate Material Design or neobrutalist hard-offset shadows in seconds
Preview shadows on light and dark backgrounds before committing to CSS
Layer multiple soft shadows for the premium, realistic depth look
Frequently Asked Questions
How do I stack multiple box shadows?
CSS accepts a comma-separated list of shadows — the first casts on top. Add layers in the tool and it composes them into one declaration automatically.
What is an inset box shadow?
An inset shadow is drawn inside the element's border box instead of outside it. It is commonly used for pressed states, input wells, and depth illusions.
Should spread be negative or positive?
Negative spread shrinks the shadow (tighter than the box), positive grows it. Most card shadows use 0 or a small positive value; glows use larger positive spread.
Free 3-Day Plus TrialFree tier available
Want AI Reminders, Gmail Sync & Calorie Tracking?
Meet Atlas AI on Telegram — your personal assistant with 3x daily briefings, photo meal tracking, and Google Calendar sync.
Related Design Tools
Color Palette Generator
Generate beautiful color palettes from any base color. Copy HEX, RGB, HSL.
CSS Gradient Generator
Design stunning linear, radial, and conic gradients with live preview. Copy CSS instantly.
Color Converter
Convert between HEX, RGB, HSL, and named CSS colors with live preview.
Color Contrast Checker
Check WCAG AA/AAA color contrast ratios for text and UI. Pick colors, see pass/fail instantly.