About Box Shadow Generator
The CSS box-shadow property draws a shadow around the box of an element from five values: horizontal offset, vertical offset, blur radius, spread radius, and color, with an optional inset keyword for an inner shadow. This generator builds a single shadow from sliders, writes the color as rgba() with the opacity you choose, and previews it on a sample card. To layer several shadows, generate each one and join them with commas.
Also known as: CSS Box Shadow Generator.
How to use Box Shadow Generator
- Fill in "Offset X", "Offset Y", "Blur" and "Spread", and the other options.
- The result appears below and updates as you type.
- Copy the result with the copy button, or download it as a file where that is offered.
Questions about Box Shadow Generator
What is the difference between blur and spread?
Blur softens the edge of the shadow: larger values make it wider and fainter. Spread grows or shrinks the shadow shape before blurring. A negative spread with a positive offset keeps the shadow tucked under one edge.
Runs in your browser. Page last updated .