Web4College

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.

Preview Example
Try it

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.

Preview Example
Try it

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.

Preview Example
Try it

Third value (blur radius)

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

Preview Example
Try it

Fourth value (spread distance)

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

Preview Example
Try it

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.

Preview Example
Try it

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