Free CSS Box Shadow Generator
Design CSS box shadows visually with sliders for offset, blur, spread, color, and opacity. Layer multiple shadows and choose from presets. Copy the generated CSS. No signup required.
100% free — no account needed
Preview
Generated CSS
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Free CSS Box Shadow Generator Features
Pixel-perfect shadows without guessing CSS values
Copy CSS
One-click copy of the generated box-shadow CSS property.
Multiple Shadows
Stack multiple shadow layers for complex, realistic effects.
5 Presets
Subtle, medium, heavy, floating, and inner glow starting points.
Intuitive Controls
Sliders for horizontal/vertical offset, blur, spread, color, and opacity.
FAQ
What do the shadow values mean?
Horizontal offset moves the shadow left/right, vertical moves up/down, blur controls softness, spread controls size, and color sets the shadow color.
What is an inset shadow?
An inset shadow appears inside the element rather than outside, creating a pressed or recessed effect.
How many shadow layers can I use?
CSS supports unlimited shadow layers. This tool lets you add multiple. Common designs use 1-3 layers for subtle, realistic depth.
Create Stunning Visual Content
Use beautiful shadows in your social media graphics.