CSS Shadow Generator

About the CSS Shadow Generator

The CSS shadow generator writes the value of box-shadow, text-shadow or filter: drop-shadow() for you. A shadow has a horizontal and a vertical offset, a blur radius, and for box shadows a spread, which grows or shrinks the shadow before it is blurred, and an optional inset keyword that draws the shadow inside the box. The blur is not a size in pixels of a soft edge: according to the CSS specification, the shadow is blurred as if by a Gaussian blur whose standard deviation is half of the blur radius, so a 12px blur has a standard deviation of 6px. A drop shadow counts differently: its blur value is the standard deviation itself, so a drop shadow with a blur of 6px looks the same as a box shadow with a blur of 12px, which we confirmed in Chromium. Text shadows and drop shadows have no spread and no inset, so the tool hides those controls and leaves them out. A drop shadow follows the shape of what is drawn, including transparent corners of an image, where a box shadow always follows the rectangle. Colour is entered as a hex value with a separate opacity, and written as rgba() when the opacity is below 100. Several layers are written as a comma separated list, with the first one on top. The generated values were tested in Chromium: for 400 random shadows of every kind, the computed style held exactly the numbers, colours and inset flags that were set. For 194 box shadows with whole pixel offsets, more than 300,000 pixels were compared with a Gaussian model of the blur, and the average difference was 0.02 levels of colour out of 255. Everything runs in your browser and nothing is uploaded.