> For the complete documentation index, see [llms.txt](https://chnn-anne.gitbook.io/html-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://chnn-anne.gitbook.io/html-css/miscellaneous-topics/box-shadow.md).

# Box-shadow

## **box-shadow: x-offset y-offset blur-radius spread-distance**

**x-offset**: A positive value offsets shadow to the right of the box. A negative value to the right.

**y-offset**: A positive value offsets the shadow down, a negative one up.

**blur-radius**: Positive values. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.

**spread-distance**: Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract.

**color**: Specifies the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2F80b528b666d785eee4576c6c04e56ce7615065cf.png?generation=1626049183595352\&alt=media)

The author of this article built this visual to help see the different parameters. There is also a CodePen link in the article.

![](https://836634774-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MeN44h3QMT7WRlkbx4e%2Fsync%2Fe47831657b5951b4d28b85336844a1998858da2c.png?generation=1626049183767416\&alt=media)

{% embed url="<https://medium.com/@nana8/css-box-shadow-what-is-difference-between-blur-and-spread-c3a3de92a126>" %}