CSS Box Shadow Generator

Create beautiful CSS box shadows with live preview. Perfect for modern web design and UI elements.

Shadow Controls

Shadow 1

Horizontal Offset

0px

Vertical Offset

4px

Blur Radius

6px

Spread Radius

0px

Shadow Color

Opacity

10%

Inset shadow

Quick Presets

Live Preview

Preview Background

Preview Element

Element Background

Generated CSS

.shadow-element {
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}

How to use:

1. Copy the CSS code above
2. Add it to your CSS file or <style> tag
3. Apply the class to your HTML element

Box Shadow Properties

•Horizontal: Moves shadow left (-) or right (+)
•Vertical: Moves shadow up (-) or down (+)
•Blur: Higher values create softer shadows
•Spread: Makes shadow larger (+) or smaller (-)
•Inset: Creates inner shadows instead of outer

Design Tips

✓Use subtle shadows for elegant designs
✓Layer multiple shadows for depth
✓Match shadow direction with light source
✓Consider accessibility and contrast