Skip to main content

CSS Shadow Generator

A free online tool to visually create CSS box-shadow and text-shadow and copy the code.

Box Shadow

Shadow Type

Shadow Layers

Layer 1
10%

CSS Code

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

Shadow Presets

Key Features​

  • 2 Types: Box Shadow, Text Shadow
  • Real-time Preview: See changes instantly
  • Multiple Layers: Add up to 5 shadow layers
  • Fine Control: X/Y offset, blur, spread, color, opacity
  • Inset Support: Inner shadow effect
  • Presets: 6 shadow presets
  • One-Click Copy: Copy CSS code instantly

Shadow Types​

1. Box Shadow​

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

Adds shadow effects outside or inside elements.

Parameters:

  • X Offset: Horizontal movement (-50px ~ 50px)
  • Y Offset: Vertical movement (-50px ~ 50px)
  • Blur: Shadow blur amount (0 ~ 100px)
  • Spread: Shadow size (-50px ~ 50px)
  • Color: Shadow color and opacity
  • Inset: Convert to inner shadow

Use Cases:

  • Card shadows
  • Button depth
  • Modal backgrounds
  • Image border effects

2. Text Shadow​

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

Adds shadow effects to text.

Parameters:

  • X Offset: Horizontal movement (-50px ~ 50px)
  • Y Offset: Vertical movement (-50px ~ 50px)
  • Blur: Shadow blur amount (0 ~ 100px)
  • Color: Shadow color and opacity

Use Cases:

  • Header titles
  • Logo text
  • Neon effects
  • 3D text

Multiple Layer Shadows​

Multiple shadows can be layered using comma separation.

Elevated Card​

.elevated-card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.elevated-card:hover {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
}

Neon Effect​

.neon-text {
  text-shadow:
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #0ff,
    0 0 70px #0ff;
}

Browser Compatibility​

Box Shadow​

  • ✅ Chrome 10+
  • ✅ Firefox 4+
  • ✅ Safari 5.1+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ All mobile browsers

Text Shadow​

  • ✅ Chrome 4+
  • ✅ Firefox 3.5+
  • ✅ Safari 4+
  • ✅ Edge 12+
  • ✅ IE 10+
  • ✅ All mobile browsers