CSS Box Shadow Generator
Generate box-shadow CSS with live preview. Adjust offset, blur, spread and color.
Back to all tools on ToolForge
Live Preview
CSS Output
box-shadow: 4px 6px 12px 0 rgba(0,0,0,0.15);
About CSS Box Shadow Generator
This tool generates CSS box-shadow values with a live preview. Adjust horizontal and vertical offset, blur radius, spread and color.
Box Shadow Syntax
/* Basic syntax */ box-shadow: [inset] x-offset y-offset blur spread color; /* Parameters */ /* x-offset: horizontal distance (positive = right, negative = left) */ /* y-offset: vertical distance (positive = down, negative = up) */ /* blur: larger = softer edges (0 = sharp shadow) */ /* spread: positive = larger shadow, negative = smaller shadow */ /* inset: optional, makes shadow appear inside the element */ /* Examples */ box-shadow: 4px 4px 8px rgba(0,0,0,0.3); /* Basic shadow */ box-shadow: -4px -4px 8px rgba(0,0,0,0.3); /* Top-left shadow */ box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Bottom shadow only */ box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inner shadow */
Common Shadow Patterns
| Effect | CSS |
|---|---|
| Subtle elevation | 0 1px 3px rgba(0,0,0,0.12) |
| Card shadow | 0 4px 12px rgba(0,0,0,0.15) |
| Deep shadow | 0 8px 24px rgba(0,0,0,0.2) |
| Glow effect | 0 0 20px rgba(66,153,225,0.5) |
| Multiple shadows | 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.15) |
Frequently Asked Questions
- What is the box-shadow syntax?
- Box-shadow syntax is: box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. X-offset controls horizontal shadow, y-offset controls vertical shadow, blur creates soft edges, spread expands/contracts the shadow, and inset makes the shadow appear inside the element.
- How do I create a soft shadow?
- For soft shadows, use a larger blur radius (10-30px) with low opacity (0.1-0.2). Example: box-shadow: 0 4px 20px rgba(0,0,0,0.15). The key is balancing blur radius with color opacity—higher blur needs lower opacity to avoid muddy appearance.
- What is the spread radius in box-shadow?
- Spread radius expands (positive) or contracts (negative) the shadow size. A positive spread makes the shadow larger on all sides; negative spread shrinks it. Useful for creating layered effects or tight shadows that hug the element closely.
- How do I create multiple shadows?
- Separate multiple shadows with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.15). Shadows render from top to bottom (first = closest to element). Use multiple shadows for depth, glow effects, or layered elevation.