toolkit

Shadow Generator

Runs in browser

Design CSS box shadows visually

Color
Presets

How to Use

Adjust offsets and blur to create shadow effects.

You will see:

  • Shadow Preview on card
  • Generated CSS Output
  • Code Copy Button
Preview

CSS

box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.2);

Related Tools

Design

Gradient Generator

Design

Color Picker

About CSS Box Shadows

Box shadows add depth and visual hierarchy to UI elements. Well-designed shadows create the illusion of elevation, helping users understand which elements are interactive or important.

Shadow Properties

box-shadow: offset-x offset-y blur spread color [inset];
offset-x:
Horizontal shadow position
offset-y:
Vertical shadow position
blur:
Shadow softness
spread:
Shadow size expansion

Material Design Elevation

Use multiple shadows for realistic depth:

  • Elevation 1: Subtle hover states
  • Elevation 2: Cards and containers
  • Elevation 3: Dropdowns and modals
  • Elevation 4: Floating action buttons

💡 Pro Tips

  • Layer multiple shadows for realistic depth
  • Use colored shadows for glassmorphism effects
  • Reduce shadows in dark mode — they're less visible
  • Animate shadows for hover states

Further Reading