CSS Box Shadow Generator
Stack multiple shadow layers, fine-tune offset, blur and spread, then copy production-ready box-shadow CSS.
CSS generated is free to use — no attribution required.
How do you use the box-shadow CSS generator?
Adjust the sliders for horizontal offset, vertical offset, blur radius and spread radius. Use the color picker to set the shadow color and adjust opacity. Add multiple layers with the "Add shadow layer" button — shadows stack from first (top) to last (bottom).
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Add inset before the offsets for an inner shadow. Comma-separate multiple shadows: box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 8px 16px rgba(0,0,0,.1).
What is the smooth shadow technique?
A natural-looking shadow uses 4–5 layers with progressively larger offsets and decreasing opacity. The "Smooth shadow" feature generates this automatically — a technique popularized by shadows.brumm.af.
What is the difference between box-shadow and drop-shadow?
box-shadow always follows the rectangular bounding box of the element (including border-radius). filter: drop-shadow() follows the actual visual shape — useful for SVGs and PNGs with transparency.
What is the browser compatibility for CSS box-shadow?
box-shadow has 99%+ browser support. The -webkit-box-shadow prefix was required for Safari <5.1 (2011) and is no longer needed.