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 Property

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>&mdash; 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>&mdash; 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.