css box shadow

The box shadow of any visual element can be specified by the box-shadow property. There are four values that specify the size, range and blurring of the box shadow.

box-shadow values

There are four values of this box-shadow property. The four values represent horizontal-offset, vertical-offset, blur radius and spread distance.

First value(horizontal offset)

The first value represents the movement of shadow along x-axis. The value may be positive or negative. positive and negative values move the drop shadow to the right or left respectively.

Second value (vertical offset)

The second value decides the movement of shadow along vertical axis. The value may be positive or negative. positive or negative values move the shadow downward or upward respectively.

Third value (blur radius)

The third value represents the blur radius of the shadow. The box shadow becomes blurred.

Fourth value (spread distance)

The fourth value defines the spread distance of the box-shadow.

The above given examples represent an outer box-shadow. But the inset keyword sets the box-shadow in the inner side.

See the example given below.

Use css box shadow generator to generate the shadow of a box.