CSS Box-shadow
CSS Box-shadow
This property is referred to include effects as shadow-like around an element’s frame.
Syntax
box-shadow: h-offset v-offset blur spread color |inset|inherit|none;
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:
ValuesDescriptionh-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:
<!DOCTYPE html>
<html>
<head>
<title> Box-shadow </title>
<style>
div
{
border: 1px solid;
padding: 10px;
}
.hvb
{
/* box-shadow: h-offset v-offset blur */
box-shadow: 5px 10px 10px;
}
.spr
{
/* box-shadow: h-offset v-offset blur spread */
box-shadow: 5px 10px 10px;
}
.col
{
/* box-shadow: h-offset v-offset blur spread color */
box-shadow: 5px 10px 10px 10px lime;
}
.ins
{
/* box-shadow: h-offset v-offset blur spread color inset */
box-shadow: 5px 10px 10px 10px lime inset;
}
.init
{
/* box-shadow: initial */
box-shadow: initial;
}
.non
{
/* box-shadow: none */
box-shadow: none;
}
</style>
</head>
<body>
<div class= "hvb">
<h1> This Box contains blur, v-offset, and h-offset attributes. </h1>
</div>
<br><br>
<div class= "spr">
<h1> This Box contains the spread attributes. </h1>
</div>
<br><br>
<div class= "col">
<h1> This Box contains the color attributes. </h1>
</div>
<br><br>
<div class= "ins">
<h1> This Box contains the inset attributes. </h1>
</div>
<br><br>
<div class= "init">
<h1> This Box contains the initial attributes. </h1>
</div>
<br><br>
<div class= "non">
<h1> This Box contains the default attributes. </h1>
</div>
</body>
</html>
Output: