Logo

Box Shadow Generator

Create beautiful CSS box shadows with live preview and multiple layers

Preview

CSS Code

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
shadow

Presets

Shadow Layers (1)

Layer 1

How to Use the Box Shadow Generator

Quick Start

  1. Pick a preset close to what you want (Soft, Material Design, Neon, etc.).
  2. Tweak the sliders for Offset, Blur, and Opacity until the preview matches your design.
  3. Copy the generated CSS or download it as a file for your project.

Shadow Recipes

Soft Card Shadow

Ideal for dashboards or cards where you want depth without harsh edges.

  • Layer 1: offsetY 12px, blur 24px, spread -8px, opacity 18%
  • Layer 2: offsetY 4px, blur 10px, spread -4px, opacity 10%

Pressed Button (Inset)

Combine inner and outer shadows to mimic a tactile surface.

  • Layer 1 (Inset): offsetY 2px, blur 6px, spread 0px, opacity 25%
  • Layer 2: offsetY 4px, blur 10px, spread -4px, opacity 14%

Neon Glow

Stack multiple zero-offset shadows with bright colors for a glow effect.

  • Layer 1: blur 12px, spread 0px, color #8b5cf6, opacity 60%
  • Layer 2: blur 28px, spread 0px, same color, opacity 35%
  • Optional Layer 3: blur 48px, spread 4px, opacity 20%

What Each Control Does

  • Offset X/Y: Moves the shadow horizontally or vertically; positive Y pushes the shadow down.
  • Blur: Softens the edges. Higher blur spreads the shadow but can wash it out if opacity stays low.
  • Spread: Expands (positive) or contracts (negative) the shadow’s size before the blur is applied.
  • Opacity: Controls visibility. Subtle UI shadows usually stay between 8% and 25%.
  • Inset: Flips the shadow inside the element for pressed or inner-glow effects.
  • Color: Sets the shadow hue. Try matching brand accents for colored glows.

Pro Tips

  • Combine a small sharp shadow with a larger blurred one to mimic natural light falloff.
  • Keep offsets short when designing for cards or tiles; large offsets can feel like floating elements.
  • Preview on both light and dark backgrounds using the “Background Color” picker to catch contrast issues.
  • Neumorphism uses both a light and a dark shadow on opposite sides; try duplicate layers with inverted offsets.
  • Use the Tailwind output as guidance—custom shadows may still need direct CSS for pixel-perfect control.

Troubleshooting

  • Shadow too intense? Lower opacity first, then reduce spread or blur.
  • Edges look clipped? Increase the preview element’s border radius or spread slightly.
  • Inset shadow barely visible? Try increasing blur while keeping spread near zero.
  • Need to replicate CSS elsewhere? Copy the exact box-shadow value shown in the CSS output panel.