What is CSS Box Shadow Generator?
CSS box shadow generator for visual shadow creation. Parameters: horizontal offset (offset-x), vertical offset (offset-y), blur radius, spread radius, color, and inset (inner shadow). Live preview with one-click CSS code copy. Supports multiple shadow layers. Suitable for card design, button effects, floating elements, and depth design. All generation runs locally in your browser.
▶Use Cases5 scenarios
- ◆Card component shadow effects
- ◆Button hover shadows
- ◆Modal overlay depth
- ◆Material Design elevation
- ◆CSS art creation
▶How to Use4 steps
- 1Adjust sliders to set shadow parameters
- 2Preview the shadow in real time
- 3Add multiple shadow layers (optional)
- 4Copy the CSS code
▶Features5 features
- ✓Visual sliders
- ✓Live preview
- ✓Multiple layers
- ✓Color picker
- ✓CSS code export
▶FAQ7 questions
What is the CSS Box Shadow Generator?
An online frontend tool. Input: offset-x, offset-y, blur radius, spread radius, color, and inset. Output: CSS box-shadow code with multi-layer support. Use it for cards, buttons, and floating elements.
What are the 4 box-shadow parameters?
`box-shadow: offset-x offset-y blur-radius spread-radius color`. offset-x = horizontal (positive=right), offset-y = vertical (positive=down), blur = edge softness (0=hard edge), spread = size expansion (positive=grow, negative=shrink).
How do I create an inner shadow?
Add the `inset` keyword: `box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)`. Inner shadows render inside the element — commonly used for inset/engraved effects.
How do I add multiple shadows?
Separate with commas: `box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)`. First shadow renders on top. Multiple layers create more natural depth.
What is the difference between blur and spread?
Blur controls edge softness (0 = hard edge, higher = softer). Spread controls shadow size (0 = same as element, positive = larger, negative = smaller). They work independently.
What are Material Design shadow standards?
Material Design defines 24 elevation levels, each with specific shadows. E.g., elevation 2 (cards): `0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15)`.
Why can't I see my shadow?
Common causes: (1) blur=0 and spread=0 makes it tiny; (2) color alpha too low (e.g., rgba(0,0,0,0.01)); (3) parent `overflow:hidden` clips the shadow; (4) offset pushes it off-screen.