CSS Box Shadow Generator — Free Online Tool

The CSS Box Shadow Generator gives you sliders for horizontal and vertical offset, blur radius, spread, colour, and the inset flag, with a live preview of the result and the CSS ready to copy. Box-shadow has five numeric values whose interaction is genuinely hard to predict from the numbers alone, which is what makes a visual editor worth using.

A shadow reads as realistic when it behaves like a real one: light comes from above, so vertical offset should be positive and larger than the horizontal offset, which is usually zero. Blur should be roughly two to three times the vertical offset — a large offset with little blur produces the hard drop shadow that instantly dates a design. Spread is the least used and most useful for the opposite job: a negative spread tightens a shadow so it does not bleed out from under a small element.

Two details worth stealing from well-made design systems. First, opacity beats darkness — a black shadow at 8 to 15 percent alpha looks far better than a grey shadow at full opacity, because a real shadow darkens whatever is beneath it rather than painting grey over it. Second, layering two or three shadows at different offsets and blurs in a single declaration produces depth that no single shadow achieves, and box-shadow accepts a comma-separated list precisely for that.

The preview and the generated CSS are produced entirely in your browser.

Our CSS Box Shadow Generator is completely free to use with no signup required. For this tool, processing runs in your browser — your files and data stay on your device and are not uploaded to our servers.

Whether you are a developer, designer, student, or business owner, this tool is designed to save you time and make your workflow more efficient. Bookmark this page to access it whenever you need it — it will always be free.