CSS Box Shadow Generator
Create beautiful CSS box shadows visually. Adjust offset, blur, spread, and color with live preview.
Preview Box
Inset Shadow
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.15);Why use box shadows?
Box shadows add depth and dimension to UI elements. They help create visual hierarchy, draw attention to important components, and make interfaces feel more tangible and modern.
Frequently Asked Questions
What are the box-shadow parameters?
Box-shadow has: horizontal offset (X), vertical offset (Y), blur radius, spread radius, color, and optional inset. Positive X moves shadow right, positive Y moves it down.
What is an inset shadow?
An inset shadow appears inside the element instead of outside. It creates a pressed or recessed effect, commonly used for input fields and buttons.
Can I add multiple shadows?
Yes! Click 'Add Shadow' to layer multiple shadows on one element. Multiple shadows can create depth, realistic effects, or decorative borders.
What's the difference between blur and spread?
Blur makes the shadow softer and more diffuse. Spread expands or contracts the shadow size. Combine both for natural-looking shadows.
How do I create a realistic shadow?
For realistic shadows: use subtle offsets (2-8px), moderate blur (8-24px), minimal spread, and semi-transparent black or gray colors (rgba with 0.1-0.3 opacity).