CSS Box Shadow Generator
The CSS Box Shadow Generator creates box shadow effects for HTML elements. Box shadows add depth and dimension to cards, buttons, and UI components. This generator lets you configure horizontal offset, vertical offset, blur radius, spread radius, shadow color, and inset option. It provides a real-time preview and generates ready-to-use CSS code. Perfect for creating modern, material design-style shadows.
Formula
Box shadow syntax: box-shadow: h-offset v-offset blur spread color [inset]; - h-offset: horizontal shadow position - v-offset: vertical shadow position - blur: blur radius (higher = softer) - spread: shadow size expansion - color: shadow color - inset: inner shadow (optional)
Example
Simple drop shadow: box-shadow: 4px 4px 8px rgba(0,0,0,0.2); Material design shadow: box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1); Inset shadow: box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3);
How to Use
- Adjust horizontal and vertical offset
- Set blur and spread radius
- Choose shadow color and opacity
- Toggle inset for inner shadow
- Copy the generated CSS code
Frequently Asked Questions
What is the difference between blur and spread?
Blur radius controls how soft the shadow edges are (higher = more blurred). Spread radius controls how far the shadow extends beyond the element (positive = larger, negative = smaller). For a soft, natural shadow, use blur > 0 and spread = 0.
How do I create a material design shadow?
Material design uses multiple layered shadows. For example: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). The generator can create these multi-layer shadows automatically.
What is an inset shadow?
An inset shadow appears inside the element rather than outside. This creates an embossed or pressed effect. Use inset shadows for form inputs, buttons in pressed state, or to create depth in containers.
Can I use multiple shadows?
Yes. Separate multiple shadows with commas. For example: box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1). Multiple shadows create more realistic depth.
How do I make shadows look natural?
Use low opacity (0.1-0.3), moderate blur (4-16px), and small offsets (2-8px). Avoid pure black shadows — use dark gray or the element's color for a more natural look. Multiple subtle shadows look better than one heavy shadow.