Box Shadow Generator

In short A box shadow takes an x and y offset, a blur radius, an optional spread and a colour — and getting a natural result depends almost entirely on using more than one. A single large soft shadow is the signature of a generated design: real objects cast a tight dark shadow right at the contact point plus a wider, much fainter one further out, and stacking two or three layers with increasing blur and decreasing opacity reproduces that immediately. Comma-separate them and they render front to back in order. Three things to keep in mind. Shadows should share a light direction with everything else on the page — if one card's shadow falls down-right and another's falls straight down, the page looks assembled from parts. Opacity does more work than blur: most convincing shadows sit somewhere between 5% and 20% black rather than a solid grey. And `inset` flips the shadow inward, which is how you make a well, a pressed button or an inner border without adding an element. Large blurred shadows on many elements are one of the more expensive things to paint, so use them where they carry meaning rather than everywhere.