</CSS3 BOX-SHADOW>

Box-Shadow is a CSS property which is use to give shadow effects to HTML elements. We can use multiple css box-shadow properties to give an attractive 3D look to HTML elements.

SEE MORE

Style_Sheets @Import_Rule Structure Box_Model Background_Image Media_Queries Fonts FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz

</CSS3 BOX-SHADOW>

How to use box-shadow property?

We can attach one or more shadow with HTML elements. A CSS3 box-shadow property used X and Y offset relative to HTML element

SYNTAX
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];


<style>
/*example*/
.tdb-shadow{
	width:50px;
	height:50px;
	box-shadow:5px 0 0 5px gray;
}
</style>


	

<head>
	<style>
	.tdb-shadow{
		padding:15px 0;
		text-align:center;
		width:150px;
		border-radius:5px;
		box-shadow:2px 2px 5px 0px gray;
		}
	</style>
</head>

<body>
	<div class="tdb-shadow">Box-Shadow</div>
</body>

Try it Yourself

Box-Shadow Examples

Shadow1

Shadow2

Shadow3

Shadow4

Shadow5

Shadow6

</CSS3 Quiz Question>

what is the correct format of box-shadow property?
1. box-shadow:5px 0 gray 0 5px;
2. box-shadow:gray 5px 0 0 5px;
3. box-shadow:5px, 0, 0, 5px, gray;
4. box-shadow:5px 0 0 5px gray;

Check Now

CSS3 QUIZ

Next: CSS3 Display Property