Box-shadow
The box-shadow property creates a shadow effect on elements.
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.
The author of this article built this visual to help see the different parameters. There is also a CodePen link in the article.
Last updated
