CSS Box-shadow

This property is referred to include effects as shadow-like around an element’s frame.

Syntax

Property values

Following are the various property values which can be used to provide distinct kind of variations to our elements or text. Let’s have a look:

ValuesDescription
h-offsetIt sets the horizontal position of the shadow. It includes some positive value that will be used to position the shadow towards the right surface of a box. It includes some negative values that will be used to position the shadow towards the left surface of a box.
v-offsetIt sets the vertical position of the shadow. It includes some positive value that will be used to position the shadow down the box. Also, it includes some negative values that will be used to position the shadow over the box.
blurAs the name suggests, this value is referred to blur any box-shadow. It is also optional.
spreadThis value set-up the size of the shadow. The size of the shadow spread in CSS depends on the value of the spread.
colorAs the name suggests, it sets the shadow color. This attribute is optional.
insetGenerally, the shadow produces outside of a box, after using the  inset attribute, theshadow may be designed inside a box.
initialThis value is generally referred to set-up the box-shadow attribute to its default value.
inheritThis value can be acquired from the parent element.
noneNone value is a default value, and it does not add any property of shadow.

Example of Box-shadow

Let’s consider the following simple example for box-shadow effect:

Output:

CSS Box-shadow

Pin It on Pinterest

Share This