CSS Box Shadow Generator
Build CSS box-shadow values visually. Preview live and copy the generated CSS.
box-shadow: 0px 8px 16px 0px #00000033;
What is CSS Box Shadow Generator?
CSS box-shadow accepts horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be stacked for layered effects. This visual builder generates the CSS for any combination — useful for buttons, cards, and depth effects.
Frequently asked questions
How do I stack multiple shadows?▼
Comma-separate them in the box-shadow value. Stacking creates more realistic depth than single shadows.
What's the difference between blur and spread?▼
Blur softens the shadow edges; spread expands or contracts the shadow's size before blurring.
Related tools
Color Converter (HEX/RGB/HSL)
Convert colors between HEX, RGB, HSL, OKLCH.
CSS Gradient Generator
Build linear and radial CSS gradients.
Cubic Bezier Generator
Build CSS easing curves visually.
Color Palette Generator
Generate harmonious color palettes from any base color.
CSS Border Radius Generator
Build complex CSS border-radius visually.
CSS Clamp Generator
Generate responsive CSS clamp() functions.