π¨ Box Shadow Generator
Design layered CSS shadows visually, then copy the code.
How to Use This Generator
Drag the sliders to shape the shadow, pick a color and opacity, and watch the preview update in real time. When it looks right, copy the CSS and paste it into your stylesheet. Everything runs locally in your browser.
Set the X and Y offsets to position the shadow. Positive Y drops the shadow below the element, the classic card look.
Adjust blur for softness and spread for size. Negative spread shrinks the shadow for tight, crisp edges.
Pick a color and opacity. Dark blue-gray at 10 to 20 percent opacity looks natural on white backgrounds.
Copy the CSS output and paste it into your project.
Box Shadow Syntax
All lengths except color are required in that order. Multiple shadows can be layered with commas: a tight dark shadow plus a wide soft one creates realistic depth. The inset keyword flips the shadow inside the element for pressed or inner-glow effects.
Design Guidelines
Great shadows are subtle. Real-world shadows are soft, slightly blue or warm depending on ambient light, and never pure black at high opacity. A reliable card shadow is 0 4px 16px rgba(0,0,0,0.10). Larger blur values read as "floating higher," so modals use bigger, softer shadows than cards. Keep the X offset at zero for centered, symmetric elevation, the safest default.
Performance note: huge blur radii on many elements can slow low-end devices because the browser repaints them on scroll. Prefer modest blurs, and avoid animating box-shadow directly; animate transform and opacity instead.
Worked Example
A pricing card that lifts on hover: resting state 0 2px 8px rgba(11,42,74,0.08), hover state 0 12px 32px rgba(11,42,74,0.16) with transform: translateY(-4px). Generate both with this tool, then transition between them in CSS for a smooth, professional effect.
Common Mistakes
Pure black shadows at 50 percent opacity look muddy and dated; tint the color toward your background instead. Forgetting the spread parameter is fine, it defaults to zero, but adding 1 to 2 px of spread can sharpen card edges nicely. And remember that box-shadow does not affect layout, so it can overflow containers with overflow: hidden, clipping the shadow unexpectedly.
Frequently Asked Questions
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: 0 8px 24px rgba(0,0,0,0.15). Add the 'inset' keyword first for inner shadows, and separate multiple shadows with commas.
How do I make a soft card shadow?
Use zero X offset, a small Y offset (4-8px), a blur 2-3x the offset (16-24px), and low opacity (8-15%). Example: 0 6px 20px rgba(11,42,74,0.12).
What is the difference between blur and spread?
Blur softens the shadow edges over a radius; spread expands or contracts the shadow's size before blurring. Positive spread makes it bigger, negative spread makes it smaller and tighter.
Can I layer multiple box shadows?
Yes, separate them with commas. The first shadow renders on top. A common pattern layers a tight shadow for definition under a wide soft shadow for depth.
Why does my shadow look muddy?
Pure black at high opacity looks dirty. Tint the shadow color toward your palette (dark blue on light UIs, warm brown on warm UIs) and keep opacity under 25 percent for UI work.