Box Shadow Generator

What is a Box Shadow?

A box shadow is a CSS property that adds shadow effects around an element's frame. Shadows create depth, visual hierarchy, and help elements stand out from the background. They are essential for modern UI design, particularly in card-based layouts, modals, buttons, and floating elements.

Why Use Box Shadows?

Box shadows serve several important design purposes:

• Visual hierarchy: Elevate important elements above the page surface
• Depth perception: Create realistic 3D effects in flat designs
• Focus and attention: Draw user attention to interactive elements
• Material design: Implement elevation systems (1dp, 2dp, 8dp, etc.)
• Hover states: Add subtle depth changes on interaction
• Separation: Distinguish content sections without hard borders

Understanding Shadow Properties

Each shadow layer has five key properties:

Horizontal Offset (X)

The horizontal distance of the shadow from the element:

• Positive values: Shadow appears to the right
• Negative values: Shadow appears to the left
• 0: Shadow is centered horizontally
• Range: -50px to 50px (adjustable)

Vertical Offset (Y)

The vertical distance of the shadow from the element:

• Positive values: Shadow appears below (most common)
• Negative values: Shadow appears above
• 0: Shadow is centered vertically
• Common pattern: Y offset between 4-24px for card elevation

Blur Radius

Controls how soft or sharp the shadow appears:

• 0: Hard, sharp shadow edge
• Low values (4-12px): Crisp, nearby shadows
• Medium values (16-32px): Soft, natural shadows
• High values (40-100px): Very diffuse, distant shadows
• Tip: Larger blur = light source farther away

Spread Radius

Expands or contracts the shadow before applying blur:

• Positive values: Shadow grows larger than the element
• Negative values: Shadow shrinks smaller than the element (common for cards)
• 0: Shadow matches element size before blur
• Common pattern: Negative spread (-8 to -16px) creates tighter, more refined shadows

Color & Opacity

The shadow color and transparency:

• Color: Usually black (#000000) or dark gray for realism
• Opacity: 0.05-0.30 for subtle shadows, 0.3-0.6 for pronounced effects
• Tip: Use very low opacity (0.08-0.18) for modern, soft elevations

Inset vs Drop Shadow

• Drop shadow (default): Shadow appears outside the element, creating elevation
• Inset shadow: Shadow appears inside the element, creating depth or pressed effect

How to Use This Tool

Create a Single Shadow

1. Start with the default shadow (modern card elevation preset)
2. Adjust Offset Y to change how high the element appears to float
3. Modify Blur radius to make the shadow softer or sharper
4. Tweak Spread radius (usually negative) to control shadow tightness
5. Adjust Opacity for subtlety (12-20% is typical for UI cards)
6. Change Color if you want tinted shadows (rarely needed)
7. Toggle Inset to create inner shadows (for inputs, wells, etc.)

Create Multi-Layer Shadows

Modern UI shadows often use multiple layers to simulate realistic lighting:

1. Click + Add layer to add a second shadow
2. The new layer will auto-generate with lighter, tighter values
3. Select a layer by clicking its pill to edit it
4. Common pattern:
   • Layer 1: Small, tight shadow (Y: 4px, Blur: 8px, Opacity: 0.12)
   • Layer 2: Larger, softer shadow (Y: 12px, Blur: 24px, Opacity: 0.08)
   • Layer 3 (optional): Very diffuse ambient shadow (Y: 24px, Blur: 48px, Opacity: 0.05)

Tips for Great Shadows

• Start subtle: Shadows should enhance, not overpower
• Match light direction: Keep Y offsets consistent (all positive or all negative)
• Use negative spread: Makes shadows more realistic and refined
• Stack layers: 2-3 layers create more natural, photographic shadows
• Test on different backgrounds: Ensure shadows work on light and dark surfaces
• Reduce motion: Avoid animating blur/spread (expensive), animate opacity/offset instead

Common Shadow Presets

Minimal Card

• Offset: 0px, 2px
• Blur: 4px
• Spread: 0px
• Opacity: 0.1

Material Design Elevation 2

• Layer 1: 0px, 2px, 4px, -1px, opacity 0.2
• Layer 2: 0px, 4px, 8px, 0px, opacity 0.14

Floating Button

• Offset: 0px, 8px
• Blur: 16px
• Spread: -4px
• Opacity: 0.25

Pressed / Inset (for inputs)

• Inset: true
• Offset: 0px, 2px
• Blur: 4px
• Spread: -1px
• Opacity: 0.1

Using the Generated CSS

Standard CSS

Copy the CSS snippet and apply it to any class:

.card {
  box-shadow: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
}

Tailwind CSS

Use the arbitrary value syntax directly in your HTML:

<div class="shadow-[0px_24px_48px_-12px_rgba(0,0,0,0.18)]">
  Card content
</div>

Or define a custom utility in your tailwind.config.js:

theme: {
  extend: {
    boxShadow: {
      'card': '0px 24px 48px -12px rgba(0, 0, 0, 0.18)',
      'card-hover': '0px 32px 64px -16px rgba(0, 0, 0, 0.24)',
    }
  }
}

Then use: <div class="shadow-card hover:shadow-card-hover">...</div>

Accessibility Considerations

Shadows are decorative and do not affect accessibility directly, but:

• Don't rely on shadows alone for interactive states—use color, border, or text changes too
• Ensure contrast remains sufficient when adding shadows to text containers
• Avoid heavy shadows on interactive elements if users have motion sensitivity
• Test with high contrast mode to ensure your UI works without shadows

Performance Notes

Box shadows are GPU-accelerated in modern browsers and have minimal performance impact. However:

• Avoid animating blur/spread: Transitions on these properties can cause repaints
• Animate opacity/transform instead: For hover effects, animate opacity or transform: translateY() with a static shadow
• Use will-change sparingly: Only add will-change: box-shadow if profiling shows it helps
• Limit layer count in production: While you can create up to 3 layers here, 1-2 is often sufficient

Browser Support

The box-shadow property is universally supported in all modern browsers:

• Chrome, Firefox, Safari, Edge: Full support
• Mobile browsers: Full support
• IE11: Full support (no need for -webkit- or -moz- prefixes)

For very old browsers (IE8 and earlier), shadows are simply ignored, and the design degrades gracefully.