Design
CSS Box Shadow Generator
Input
Adjust offsets, blur, spread and color to generate CSS box-shadow.
Offset X10px
Offset Y10px
Blur20px
Spread0px
Use negative offset values to move shadow left/up.
Output
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);Frequently Asked Questions
What are the CSS box-shadow parameters?
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. offset-x/y: shadow position. blur-radius: softness (0 = sharp). spread-radius: shadow expansion (+) or contraction (−). inset: shadow appears inside the element. Multiple shadows separated by commas are supported.
How do I create a neumorphism (soft UI) shadow?
Neumorphism uses two shadows: one light (white or near-white) and one dark (slightly darkened background color), offset in opposite directions. Example: box-shadow: 6px 6px 12px #b8b9be, −6px −6px 12px #ffffff; on a #e0e5ec background. The element appears to protrude from the surface.
Can I add multiple box shadows?
Yes. CSS supports multiple comma-separated shadows on a single element. Shadows are rendered front-to-back (first listed is in front). Use multiple shadows for complex effects: top highlight + bottom ambient shadow, or color gradients simulated with layered shadows.