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
- Linear Equations in One Variable - Solving Equations which have Linear Expressions on one Side and Numbers on the other Side | Class 8 Maths
- How to place two div side-by-side of the same height using CSS?
- How to float three div side by side using CSS?
- How to place SVG icons on a round circle side by side to another div using Bootstrap?
- Server side and Client side Programming
- Java Program to Segregate 0s on Left Side & 1s on Right Side of the Array
- How to add space (" ") after an element using :after selector in CSS ?
- CSS | caption-side Property
- How to add a Login Form to an Image using HTML and CSS ?
- How to Add Apple's new San Francisco font on a Webpage using CSS ?
- How to Add Image in Text Background using HTML and CSS ?
- How to add shadow to text using CSS ?
- How to add an image as the list-item marker in a list using CSS ?
- How to add filter to the background image using CSS ?
- Node.js Server Side Rendering (SSR) using EJS
- How to design side navigation for mobile using Sidetap plugin ?
- How to add many functions in one ng-click directive?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.