Javatpoint Logo
Javatpoint Logo

Box-shadow CSS

It is used to add shadow-like effects around the frame of an element.

Syntax

Let's understand property values.

h-offset: It horizontally sets the shadow position. Its positive value will set the shadow to the right side of the box. Its negative value is used to set the shadow on the left side of the box.

v-offset: Unlike the h-offset, it is used to set the shadow position vertically. The positive value in it sets the shadow below the box, and the negative value sets the shadow above of the box.

blur: As its name implies, it is used to blur the box-shadow. This attribute is optional.

spread: It sets the shadow size. The spread size depends upon the spread value.

color: As its name implies, this attribute is used to set the color of the shadow. It is an optional attribute.

inset: Normally, the shadow generates outside of the box, but by using inset, the shadow can be created within the box.

initial: It is used to set the property of the box-shadow to its default value.

inherit: it is inherited from its parent.

none: It is the default value that does not include any shadow property.

Let's understand the above attributes by using an illustration.

Example

Test it Now

Next TopicCSS Text-shadow




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA