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.

Example

box-shadow:15px  15px  10px  10px  rgba(0,0,0,0.2) inset;


Try </>


box-shadow values

There are four values of this 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.

Example

box-shadow:-15px 0px rgba(0,0,0,0.2);

box-shadow:5px 0px rgba(0,0,0,0.2);

box-shadow:15px 0px rgba(0,0,0,0.2);


Try </>

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.

Example

box-shadow:0px -15px rgba(0,0,0,0.2);

box-shadow:0px 5px rgba(0,0,0,0.2);

box-shadow:0px 15px rgba(0,0,0,0.2);


Try </>

Third value (blur radius)

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

Example

box-shadow:10px 10px 0px rgba(0,0,0,0.2);

box-shadow:10px 10px 10px rgba(0,0,0,0.2);

Try </>

Fourth value (spread distance)

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

Example

box-shadow:10px 10px 5px 0px rgba(0,0,0,0.2);

box-shadow:10px 10px 5px 10px rgba(0,0,0,0.2);


Try </>

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.

Example

box-shadow:15px  15px  10px  10px  rgba(0,0,0,0.2) inset;


Try </>


Was this article helpful?

 

Email:

Message: