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

Box Shadow Generator

Create beautiful CSS box shadows with our free online generator. Perfect for web designers and developers who want to add depth and dimension to their elements.

Features

• Real-time preview
• Customizable settings:
  • Horizontal offset
  • Vertical offset
  • Blur radius
  • Spread radius
  • Shadow color
  • Opacity
  • Inset option
• Copy CSS code with one click
• Mobile-friendly interface
• Dark mode support

How to Use

1. Adjust the sliders to modify shadow properties:
   • Move horizontal/vertical offset to position the shadow
   • Increase blur for a softer shadow
   • Adjust spread to expand/contract the shadow
   • Set opacity for transparency
2. Choose a shadow color
3. Toggle inset for inner shadows
4. Copy the generated CSS code

Understanding Box Shadows

Basic Properties

• Offset X: Horizontal position (positive = right, negative = left)
• Offset Y: Vertical position (positive = down, negative = up)
• Blur: How soft/diffused the shadow appears
• Spread: How large the shadow grows
• Color: Shadow color with opacity
• Inset: Creates an inner shadow instead of outer

Common Use Cases

Subtle Elevation

• Small offset
• Light blur
• Low opacity
• Used for cards and containers

Strong Depth

• Larger offset
• Higher blur
• Medium opacity
• Used for modals and popups

Inner Shadow

• Inset enabled
• Small offset
• Medium blur
• Used for pressed buttons and inputs

Why Use Our Generator

• Instant preview
• Precise control
• Clean CSS output
• User-friendly interface
• Works offline
• Free to use