codescracker


css

CSS3 Box Shadow



« Previous Tutorial Next Tutorial »


The box-shadow property is used to attach one or more shadows to a box.

The syntax of the box-shadow property is given as follows :

box-shadow:none | [<length><length><length>? || <color>][,<length><length><length>? || <color>]+;

The description of the preceding syntax is given as follows :

CSS3 Box Shadow Example

Here is an example shows how to create shadow effect to a box using CSS3 box-shadow property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Box Shadow Example</title>
	<style> 
		div { height:150px; padding:15px; background-color:green;
			color:white; box-shadow:10px 10px 5px red; }
	</style>
</head>
<body>

<div>This is a div element with a box-shadow with red colored</div>

</body>
</html>

Here is the sample output of the above CSS3 box-shadow property example code:

css3 box shadow

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test