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

• Adjust horizontal and vertical offsets to position the shadow
• Set blur radius for shadow softness and spread radius for size
• Choose shadow color and toggle inset if needed
• 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