CSS | box-shadow Property
The box-shadow property in CSS is used to give a shadow-like effect to the frames of an element.
Syntax:
box-shadow: h-offset v-offset blur spread color |none|inset|initial| inherit;
Property Value:
- h-offset: It is required to set the position of the shadow horizontally. The positive value is used to set the shadow on the right side of the box and a negative value is used to set the shadow on the left side of the box.
- v-offset: It is required to set the position of shadow value vertically. The positive value is used to set the shadow below to the box and a negative value is used to set shadow above box.
- blur: It is an optional attribute, the work of this attribute is to blur the shadow of the box.
Syntax:
box-shadow: h-offset v-offset blur;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS box-shadow Property</
title
>
<
style
>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 10px;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 28px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"gfg1"
>
<
h1
>Welcome to GeeksforGeeks!</
h1
>
</
div
><
br
><
br
>
<
div
class
=
"gfg2"
>
A computer Science portal
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- spread: It is used to set the size of the shadow. The size of the spread depends on the value of the spread.
Syntax:
box-shadow: h-offset v-offset blur spread;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS box-shadow Property</
title
>
<
style
>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset
v-offset blur spread */
box-shadow: 5px 10px 10px 10px;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset
v-offset blur spread */
box-shadow: 5px 10px 28px 20px;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"gfg1"
>
<
h1
>Welcome to GeeksforGeeks!</
h1
>
</
div
><
br
><
br
>
<
div
class
=
"gfg2"
>
A computer Science portal
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- color: It is optional attribute and used to set the color of shadow.
Syntax:
box-shadow: h-offset v-offset color;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS box-shadow Property</
title
>
<
style
>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color */
box-shadow: 5px 10px 10px 10px green;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color */
box-shadow: 5px 10px 28px 20px green;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"gfg1"
>
<
h1
>Welcome to GeeksforGeeks!</
h1
>
</
div
><
br
><
br
>
<
div
class
=
"gfg2"
>
A computer Science portal
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- inset: By default the shadow generates outside the box but by the use of inset we can create the shadow inside the box.
Syntax:
box-shadow: h-offset v-offset color inset;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS box-shadow Property</
title
>
<
style
>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color inset */
box-shadow: 5px 10px 10px 10px green inset;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: h-offset v-offset blur
spread color inset */
box-shadow: 5px 10px 28px 20px green inset;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"gfg1"
>
<
h1
>Welcome to GeeksforGeeks!</
h1
>
</
div
><
br
><
br
>
<
div
class
=
"gfg2"
>
A computer Science portal
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- initial: It is used to set box-shadow property to its default value.
Syntax:
box-shadow: initial;
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS box-shadow Property</
title
>
<
style
>
.gfg1 {
border: 1px solid;
padding: 10px;
/* box-shadow: initial */
box-shadow: initial;
}
.gfg2 {
border: 1px solid;
padding: 10px;
/* box-shadow: initial */
box-shadow: initial;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"gfg1"
>
<
h1
>Welcome to GeeksforGeeks!</
h1
>
</
div
><
br
><
br
>
<
div
class
=
"gfg2"
>
A computer Science portal
</
div
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
- inherit: This property is inherited from its parent.
- none: It is the default value and it does not contains any shadow property.
Supported Browsers: The browser supported by box-shadow property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera