CSS box-shadow Property
CSS box-shadow property is used to add shadow effects around the frame of an element. It can be used to set multiple effects, which are separated by commas. A box-shadow is identified by X and Y offsets related to the element, spread radius, and blur and color. This property enables us to cast a drop shadow from the frame of any of the elements.
Syntax for box-shadow
Following is the syntax for the box-shadow property.
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Example: CSS box-shadow Property
Here in the example below, we are using the box-shadow property with different box sizes (height and width), borders, colors, and their different values. In this case, we have given the box-shadow using the inset value.
<!DOCTYPE html>
<html>
<head>
<title>Box-shadow property in CSS</title>
<style type="text/css">
blockquote {
padding: 20px;
box-shadow:
inset 0 -3em 3em rgba(1,1,0,1),
0 0 0 2px rgb(250,250,250),
0.3em 0.3em 1em rgba(2,2,2,1);
}
</style>
</head>
<body>
<blockquote><q>You may shoot me with your words,<br/>
You may cut me with your eyes,<br/>
You may kill me with your hatefulness,<br/>
But still, like air, I'll rise.</q>
<p>— Maya Angelou</p>
</blockquote>
</body>
</html>
Output:
Example 2: CSS box-shadow Property
Here in the example below, we are using the box-shadow property with different box sizes (height and width), borders, colors and their different values. In this case, we have given the box-shadow using the rgba value- 10px 10px 10px red.
<!DOCTYPE html>
<html>
<head>
<title>Box-shadow property in CSS</title>
<style type="text/css">
blockquote {
padding: 20px;
box-shadow: 10px 10px 10px red;
}
</style>
</head>
<body>
<blockquote><q>You may shoot me with your words,<br/>
You may cut me with your eyes,<br/>
You may kill me with your hatefulness,<br/>
But still, like air, I'll rise.</q>
<p>— Maya Angelou</p>
</blockquote>
</body>
</html>
Output:
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of the Browser |
Background-size |
Contain and cover |
| Chrome |
10 |
10 |
| Edge |
12 |
12 |
| Firefox |
4 |
4 |
| Internet Explorer |
9 |
9 |
| Opera |
10.5 |
10.5 |
| Safari |
5.1 |
5.1 |
| Webview Android |
37 |
37 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
14 |
14 |
| IOS Safari |
5 |
5 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the box-shadow property in CSS is none. This property is applicable to all elements and also to the ::first-letter. It is not an inherited property. The computed value for this property is any length made absolute or any specified color computed or the specified one. The animation type for this property is a shadow list.
