CSS Box Shadow Generator

What is a Box Shadow Generator?

A Box Shadow Generator is a visual CSS tool that creates depth and elevation effects for web design elements by generating customizable drop shadows. By adjusting parameters like horizontal/vertical offset, blur radius, spread radius, color, opacity, and inset mode, you can design everything from subtle elevation to dramatic depth effects. This tool generates production-ready CSS code instantly, eliminating the guesswork of manual coding. Perfect for web designers, frontend developers, UI/UX professionals, and anyone creating modern, layered web interfaces with cards, buttons, modals, images, and containers that need visual depth.

Key Features

• Horizontal Offset: Move shadow left (-) or right (+) from -50px to +50px
• Vertical Offset: Move shadow up (-) or down (+) from -50px to +50px
• Blur Radius: Control shadow softness from sharp (0px) to very soft (50px)
• Spread Radius: Expand (+) or contract (-) shadow size from -20px to +20px
• Color Picker: Choose any shadow color with hex input
• Opacity Slider: Adjust shadow transparency from 0% to 100%
• Inset Mode: Toggle between outer drop shadow and inner inset shadow
• Real-Time Preview: See changes instantly on preview box
• Preset Shadows: Subtle, Normal, Medium, Large, and Inset presets
• Copy CSS Code: One-click copy for instant implementation

How to Use the Box Shadow Generator

1. Adjust Offset: Set horizontal and vertical shadow position
2. Set Blur Radius: Control how soft/sharp the shadow appears
3. Adjust Spread: Make shadow larger or smaller than element
4. Choose Color: Pick shadow color (typically black or dark gray)
5. Set Opacity: Control shadow intensity (15-40% for most designs)
6. Toggle Inset (Optional): Switch to inner shadow effect
7. Try Presets: Use preset buttons for common shadow styles
8. Preview in Real-Time: Watch shadow update as you adjust
9. Copy CSS Code: Click "Copy CSS" for production-ready code

Box Shadow CSS Syntax

The box-shadow property follows this format:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

• inset: (Optional) Creates inner shadow instead of drop shadow
• offset-x: Horizontal shadow position (negative = left, positive = right)
• offset-y: Vertical shadow position (negative = up, positive = down)
• blur-radius: Shadow softness (0 = sharp, higher = softer)
• spread-radius: Shadow size expansion/contraction
• color: Shadow color (hex, rgb, rgba, or named color)

Common Preset Use Cases

Subtle (Light Elevation)

box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
Gentle elevation for cards, form inputs, and subtle UI elements. Barely noticeable but adds depth.

Normal (Standard Elevation)

box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
Most common shadow for buttons, cards, modals, and general UI components. Provides clear elevation.

Medium (Moderate Elevation)

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
Noticeable depth for prominent elements like featured cards, dropdown menus, and navigation.

Large (High Elevation)

box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
Dramatic shadow for modals, dialogs, popovers, and elements that float above content.

Inset (Inner Shadow)

box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
Recessed effect for pressed buttons, input wells, and depressed UI elements.

Understanding Shadow Parameters

Offset-X and Offset-Y

• 0, 4px: Shadow directly below (most common, simulates light from above)
• 4px, 4px: Shadow to bottom-right (angled light source)
• -4px, 0: Shadow to the left
• 0, -4px: Shadow above (unusual, light from below)

Blur Radius

• 0px: Hard, sharp shadow edges (rarely used)
• 3-6px: Subtle softness for close elements
• 10-15px: Medium softness for standard elevation
• 20-30px: Very soft shadow for high elevation
• 40px+: Extremely soft for dramatic depth

Spread Radius

• Positive (+): Shadow larger than element
• Zero (0): Shadow same size as element (most common)
• Negative (-): Shadow smaller than element (creates tighter shadow)

Shadow Color and Opacity

• Black (rgba(0,0,0)): Most common, neutral shadow
• 10-20% Opacity: Very subtle shadows
• 20-40% Opacity: Standard shadow visibility
• 40-60% Opacity: Strong, dramatic shadows
• Colored Shadows: Match brand colors for creative effects

Material Design Shadow Levels

Google's Material Design defines elevation levels using shadows:

• Level 1 (1dp): 0 1px 3px rgba(0,0,0,0.12) - Minimal elevation
• Level 2 (2dp): 0 2px 4px rgba(0,0,0,0.16) - Raised button, card
• Level 3 (3dp): 0 3px 6px rgba(0,0,0,0.16) - Refresh indicator
• Level 4 (4dp): 0 4px 8px rgba(0,0,0,0.18) - App bar
• Level 6 (6dp): 0 6px 12px rgba(0,0,0,0.2) - Floating action button
• Level 8 (8dp): 0 8px 16px rgba(0,0,0,0.22) - Menu, dialog
• Level 16 (16dp): 0 16px 32px rgba(0,0,0,0.24) - Modal
• Level 24 (24dp): 0 24px 48px rgba(0,0,0,0.28) - Navigation drawer

Multiple Shadows

Combine multiple shadows for complex effects:

box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
Creates layered shadow for more realistic depth.

box-shadow: 0 0 0 4px rgba(61,90,254,0.2), 0 4px 8px rgba(0,0,0,0.15);
Adds colored outline ring plus drop shadow (focus state).

Common Use Cases

• Cards: Elevate content containers above background
• Buttons: Add depth and affordance to clickable elements
• Modals/Dialogs: Create strong separation from background
• Dropdown Menus: Show menu floating above page content
• Images: Add subtle depth to photos and graphics
• Navigation Bars: Separate header/footer from content
• Tooltips: Small floating informational boxes
• Product Cards: E-commerce product listings
• Form Elements: Inputs, textareas, select boxes (inset shadow)
• Hover Effects: Increase shadow on hover for interactivity

Shadow Design Best Practices

Light Source Consistency

Maintain consistent light direction across your design (typically top-left or directly above). All shadows should respect the same light source.

Elevation Hierarchy

Use stronger shadows for elements that should appear closer to the user. Modal > Card > Button (elevation hierarchy).

Subtlety Over Drama

Unless intentionally dramatic, keep shadows subtle. Real-world shadows are rarely harsh or extremely dark.

Color and Context

• Light Backgrounds: Dark shadows (black with low opacity)
• Dark Backgrounds: Subtle lighter shadows or colored glows
• Colored Backgrounds: Shadow color can match or complement background

Performance Considerations

• Simple shadows render faster than complex multi-layer shadows
• Avoid animating box-shadow; use transform for better performance
• Use filter: drop-shadow() for non-rectangular shapes

Hover and Interactive States

Elevate on Hover

Increase shadow size/blur on hover to simulate lifting:

.card {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s;
}
.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
      

Pressed State

Reduce shadow or use inset shadow for pressed buttons:

.button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
      

Inset Shadow Use Cases

• Text Inputs: Create recessed well appearance
• Pressed Buttons: Show button is being clicked
• Checkbox/Radio: Depressed appearance when checked
• Image Borders: Inner glow or vignette effect
• Sunken Panels: Content areas that appear recessed

Creative Shadow Effects

Colored Glow

Use bright colors with high blur for glow effects:

box-shadow: 0 0 20px 5px rgba(61, 90, 254, 0.6);

Long Shadow

Large offset with minimal blur for flat design:

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

Neumorphism

Dual light/dark shadows for soft UI:

box-shadow: 5px 5px 10px rgba(0,0,0,0.1), -5px -5px 10px rgba(255,255,255,0.7);

Outline Ring

Zero offset with spread for border-like effect:

box-shadow: 0 0 0 3px rgba(61, 90, 254, 0.3);

Browser Support

The box-shadow property has excellent browser support:

• Chrome: Full support (all versions)
• Firefox: Full support (all versions)
• Safari: Full support (all versions)
• Edge: Full support (all versions)
• Opera: Full support (all versions)
• Mobile Browsers: Full support on iOS and Android
• IE 9+: Supported (no prefixes needed for modern browsers)

Performance Tips

• Don't Animate Box-Shadow: Use transform: translateY() + opacity instead
• Use Will-Change: will-change: box-shadow; for smoother transitions
• Limit Complexity: Multiple layered shadows can impact rendering
• Avoid Large Blur Radius: Very large blur can slow down painting
• Use Pseudo-Elements: Apply shadow to ::before/::after for complex animations

Accessibility Considerations

• Don't Rely on Shadow Alone: Use borders or color for critical UI distinctions
• High Contrast Mode: Shadows may be removed; ensure UI still works
• Focus Indicators: Use shadow for focus states but also include outline
• Sufficient Contrast: Ensure text on shadowed elements remains readable

Box-Shadow vs. Filter: Drop-Shadow

• box-shadow: Respects element's box model (rectangular)
• filter: drop-shadow(): Follows element's actual shape (including transparency)
  • Example: filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  • Use for: PNG images, SVGs, irregular shapes, text

Integration with Design Systems

CSS Variables

Define reusable shadow values:

:root {
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.16);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.2);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.24);
}

.card {
  box-shadow: var(--shadow-md);
}
      

Tailwind CSS Utilities

• shadow-sm → 0 1px 2px rgba(0,0,0,0.05)
• shadow → 0 1px 3px rgba(0,0,0,0.1)
• shadow-md → 0 4px 6px rgba(0,0,0,0.1)
• shadow-lg → 0 10px 15px rgba(0,0,0,0.1)
• shadow-xl → 0 20px 25px rgba(0,0,0,0.1)
• shadow-2xl → 0 25px 50px rgba(0,0,0,0.25)
• shadow-inner → inset 0 2px 4px rgba(0,0,0,0.06)
• shadow-none → none

Common Mistakes to Avoid

• Too Dark: Shadows above 50% opacity look unnatural
• Inconsistent Direction: Mixing top and bottom shadows breaks realism
• Over-using Spread: Large spread radius creates unrealistic halos
• No Blur: Sharp shadows (0 blur) rarely look good
• Ignoring Z-Index: Element layering should match shadow intensity
• Animating Box-Shadow: Causes performance issues; use transform instead

Perfect For

• Web designers creating depth and elevation in UI designs
• Frontend developers generating CSS for cards, buttons, and modals
• UI/UX professionals implementing Material Design elevation
• Developers building design systems with consistent shadow scales
• Beginners learning CSS box-shadow properties and parameters
• Designers experimenting with inset shadows and creative effects
• Teams standardizing shadow values across projects
• Anyone needing quick, visual CSS shadow generation

Our Box Shadow Generator provides intuitive visual control over CSS drop shadows with real-time preview, preset shadow styles, and instant code generation. Whether you need subtle elevation for cards, dramatic depth for modals, or creative inset shadows for form inputs, this tool makes it easy to design and implement box-shadow values without trial-and-error coding. Adjust offset, blur, spread, color, and opacity, try presets for common styles, and copy production-ready CSS code instantly. Start adding depth and dimension to your web designs today with this free, easy-to-use box shadow generator.