CSS Box Shadow Generator

Step-by-Step Guide

1. 1Adjust the offset and blur values: Use the X offset, Y offset, and blur radius sliders to position and soften the shadow. Positive X moves it right; positive Y moves it down. Higher blur values create softer, more diffuse shadows. Zero blur creates a sharp, hard-edged shadow.
2. 2Set spread and color: Spread radius expands (positive) or contracts (negative) the shadow beyond the element's edges. Set the shadow color using the color picker and adjust opacity using the alpha channel for subtle or pronounced effects.
3. 3Toggle inset mode if needed: Enable the inset toggle to move the shadow inside the element border. Inset shadows are used for pressed states, recessed fields, and neumorphic depth effects. Outset and inset shadows can coexist on the same element.
4. 4Add additional shadow layers: Click 'Add Layer' to stack a second or third shadow declaration. Multi-layer shadows — a sharp close shadow plus a soft far shadow — create realistic depth. Reorder layers to change their render priority.
5. 5Apply a preset and refine: Select a preset (soft, material, deep, floating, or neumorphism) to load proven starting values, then fine-tune each parameter to match your design system or brand style.
6. 6Copy the CSS and paste into your project: Click the Copy button to copy the complete box-shadow declaration to your clipboard. Paste it directly into your stylesheet, CSS module, Tailwind config, or component style block — no editing required.

What This Tool Provides

• ✓Live shadow preview — updates on every slider change
• ✓X/Y offset, blur, and spread radius controls
• ✓Color picker with full RGBA opacity control
• ✓Inset shadow toggle
• ✓Multiple shadow layers — add, remove, reorder
• ✓Presets: soft, material, deep, floating, neumorphism
• ✓Preview background color selector
• ✓Production-ready CSS output — one-click copy
• ✓100% browser-based — no data sent to server
• ✓No registration required

Pro Tips

• 💡Use two-layer shadows for realistic depth — a small, sharp layer (blur 2–4px, opacity 10–15%) for the near shadow, and a large, soft layer (blur 16–32px, opacity 6–10%) for the ambient glow. The combination reads as genuine elevation rather than a flat cartoon shadow.
• 💡Match shadow color to the element's own hue rather than defaulting to black. A blue button with a blue-tinted shadow (rgba(59,130,246,0.35)) looks more cohesive than a black shadow. Keep opacity between 25–45% for colored shadows to avoid looking garish.
• 💡Always preview against your actual background color, not white. A shadow that looks perfect on a white canvas often disappears on a gray surface or clashes on a dark background. Use the background color picker in the preview panel before copying the CSS.
• 💡Use negative spread values to prevent large blur radii from making shadows too wide. A blur of 24px with spread of -4px creates a diffuse shadow that stays close to the element's footprint — good for cards that need to feel light rather than heavy.
• 💡Store shadows as CSS custom properties in your design system: --shadow-sm, --shadow-md, --shadow-lg. Generate each level in this tool, define them once in :root, and apply by name throughout your codebase. Changing an elevation level then only requires editing one property.
• 💡For components that animate (hover transitions, drawer slides), keep shadow changes in CSS transitions: transition: box-shadow 0.2s ease. Avoid animating box-shadow on very large elements at high frame rates — GPU compositing helps but very large blur radii still have a paint cost.

Common Mistakes to Avoid

• ✕Don't use the same shadow on every component. A button, a card, and a modal all have different implied elevations — they should have different shadow values. Applying one universal shadow flattens the visual hierarchy and makes the UI feel undifferentiated.
• ✕Don't use very high blur values (80px+) on elements that need to feel physically plausible. Ultra-high blur looks like a glow effect rather than a shadow. For most UI components, blur values of 4–32px produce realistic results. Reserve large blurs for deliberate glow or ambient light effects.
• ✕Don't forget to test shadows on dark mode backgrounds. A rgba(0,0,0,0.15) shadow on a white card is visible; the same shadow on a dark gray card surface is invisible. Dark mode shadow systems typically use slightly higher opacity or slightly lighter shadow colors to maintain separation.
• ✕Don't use box-shadow as a border replacement at scale. border: 1px solid is GPU-composited and cheaper than box-shadow: 0 0 0 1px. If you only need a visible outline with no blur or offset, use border or outline, not box-shadow.
• ✕Don't combine too many inset and outset layers without checking the result carefully. Three outset layers and two inset layers on a single element can produce unexpected overlap artifacts, especially with colored shadows. Build up layers incrementally and check the preview at each step.