CSS Box Shadow Generator

What is CSS Box Shadow?

CSS box-shadow is a property that adds shadow effects around an element's frame. You can set multiple effects separated by commas. Our box shadow generator makes it easy to create and customize shadows with a visual editor. Adjust offsets, blur, spread, color, and create inset shadows with real-time preview.

Box Shadow Properties

• Horizontal Offset (X): Moves shadow left (negative) or right (positive)
• Vertical Offset (Y): Moves shadow up (negative) or down (positive)
• Blur Radius: Higher values create more blur. 0 creates sharp edges
• Spread Radius: Positive values expand shadow, negative values shrink it
• Shadow Color: Shadow color with optional opacity (use hex with alpha or rgba)
• Inset Shadow: Changes shadow from outer to inner (inside the element)

How to Use

1. Adjust horizontal and vertical offsets to position the shadow
2. Set blur radius for shadow softness and spread radius for size
3. Choose shadow color and toggle inset if needed
4. Add multiple shadows for layered effects, then copy the CSS code

Key Features

• Live preview: See your shadow in real-time as you adjust values
• Multiple shadows: Layer up to 5 shadows for complex effects
• Preset shadows: Quick-start with 6 common shadow styles
• Inset shadows: Create inner shadows for depth effects
• Copy CSS code: One-click copy of complete box-shadow property