The box-shadow property is used to set the box shadow on one side of element.
box-shadow: h-offset v-offset blur spread color;
- h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on 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 and used to set the position of shadow vertically. The positive value is used to set the shadow below to the box and 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.
- spread: It is used to set the size of the shadow. The size of spread depends on the value of spread.
- color: It is optional attribute and used to set the color of shadow.
Example 1: This example set the box shadow in the bottom of box.
Example 2: This example set the box-shadow in the left side of box.
inset: By default the shadow generates outside the box but inset value can be used to create shadow inside the box.
Example 3: This example create shadow inside the box.
- HTML | DOM Style boxShadow Property
- Server side and Client side Programming
- How to place two div side-by-side of the same height using CSS?
- How to float three div side by side using CSS?
- CSS | caption-side Property
- How to align button to right side of text box in Bootstrap?
- How to remove parent element except its child element using jQuery ?
- jQuery | Move an element into another element
- CSS | element,element Selector
- CSS | element element Selector
- CSS | element > element Selector
- CSS | element+element Selector
- CSS | element~element Selector
- CSS | element Selector
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.