Box Shadow Generator
CSS box shadow generator online. Create box-shadows with multiple layers and presets. Live preview—free shadow generator tool.
S
Need Inspiration?
Check out our collection of ready-to-use shadows.
Preview
200x200
W:
H:
Radius:
Box Color:
Layers
CSS Code
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
Properties
Horizontal (X) 0px
Vertical (Y) 10px
Blur Radius 15px
Spread Radius -3px
Shadow Gallery
Inspiration Gallery
Curated collection of modern box shadow effects
Subtle Drop
Medium Soft
Floaty
Dreamy
Clean
Material 1
Material 2
Smooth Lift
Velvet Touch
Ghostly
Gentle Rise
Features
- Layered shadows support (multiple shadows)
- Visual drag-and-drop controls
- Inset vs Outset toggle
- Color picker with opacity support
- Cross-browser code generation
- Neumorphism style generator
Common Use Cases
- Create depth and hierarchy in UI
- Design neumorphic (soft UI) elements
- Generate realistic material design shadows
- Create glow effects
- Add inner shadows for depth
CSS Box Shadow
The box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
Syntax Breakdown:
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
- Inset: Changes the shadow from an outer shadow (outset) to an inner shadow.
- Offset-x/y: Horizontal and vertical distance. Negative values move shadow left/up.
- Blur Radius: How sharp or blurry the shadow is. 0 is sharp.
- Spread Radius: Positive values increase the size of the shadow, negative values decrease it.
Examples
Valid - Soft Shadow
0 4px 6px -1px rgba(0,0,0,0.1) Valid - Inner Shadow
inset 0 2px 4px 0 rgba(0,0,0,0.06) Valid - Neumorphism
20px 20px 60px #d1d1d1, -20px -20px 60px #ffffffFrequently Asked Questions
How do I make a shadow only on one side?
Use a negative spread radius equal to the blur radius. For example, a bottom-only shadow: `0 10px 10px -10px rgba(0,0,0,0.5)`.
Can I have multiple shadows?
Yes! Separate them with commas. The first shadow in the list is rendered on top, the last one on the bottom. `box-shadow: 3px 3px red, -1em 0 0.4em olive;`
What is neumorphism?
Neumorphism (Soft UI) is a design trend that uses highlights and shadows to make elements look like they are extruded from the background. It typically requires two shadows: a light one and a dark one.
💡 Tips
- Use multiple subtle shadows instead of one harsh shadow for a more realistic look.
- Avoid pure black shadows (#000000). Use a semi-transparent dark color matching your brand.
- Performance warning: Large blur radii and spread radii can be expensive to render on low-end devices.