Box Shadow is a css property is used to add the shadow effect to the html element. The Box shadow play the main role in the material design. And you can use this property to add the external effect to when you click anything like button div or tab anything in the mobile design.
Syntax:
.sample-class-name{
box-shadow: [horizontal-offset X] [vertical-offset Y] [blur-radius] [spread-radius] [color];
}Horizontal Offset X: REQUIRED
Horizontal Offset is used to apply the Shadow to left and right side of the element. If you give the positive value its will apply the shadow on the right side of the element. If you give the negative value it will apply the shadow on the left side of the element.
Vertical Offset Y:REQUIRED
Vertical Offset is used to apply the shadow at the top and bottom of the html element. If you give the positive value its will apply the shadow at the bottom of the element if you give the negative value its will apply the shadow at the top of the html element.
Blur –radius: REQUIRED:
If set to 0 the shadow will be sharp, the higher the number, the more blurred it will be, and the further out the shadow will extend. For instance a shadow with 5px of horizontal offset that also has a 5px blur radius will be 10px of total shadow.
Spread Radius:
It's used to spread the radius color. If you give the positive value radius spread more space throw out surrounding of the html element. If you give the negative value it will reduce spread color.
Color:REQUIRED
Color is required value because the color will show in the shadow. If you can use the any color.
Inset:
Inset is used to apply the box shadow values inside the html element.
Example:
.sample-class-name{
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}Output:
Using Inset in Box Shadow:
Syntax:
.sample-class-name{
box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-o-box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}Output:
Browser Support:
| Feature | Chrome | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | Yes | Yes | Yes | Yes | Yes |
