This website may use cookies. More info. That's Fine x
Welcome Login

Css: box-shadow


Css 3

box-shadow property attaches one or more drop-shadows to the box

Note: property omitted lengths are 0.

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

 

Value 	      Description
h-shadow      position of the horizontal shadow. Negative values are allowed (required)	
v-shadow      position of the vertical shadow. Negative values are allowed (required)
blur 	      blur distance, ie: distance in pixels of blur (optional)
spread 	      size of shadow (optional)	
color 	      color of the shadow (optional)	
inset 	      changes the shadow from an outer shadow (outset) to an inner shadow (optional)

 

 

Eg:

<!DOCTYPE html>
<html>
<head>
<style> 
    div {
    width:200px;
    height:100px;
    background-color:grey;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
    }
</style>
</head>
<body>

<div></div>

</body>
</html>

 

Outputs:

css-boxshadow2

 

Eg2:

<!DOCTYPE html>
<html>
<head>
<style> 
    div {
    width:300px;
    height:100px;
    background-color:grey;
    box-shadow: 10px 10px 5px red;
    }
</style>
</head>
<body>

<div></div>

</body>
</html>

 

Outputs:

css-boxshadow1

 

 

For more information, see here.


Created on: Monday, December 31, 2012 by Andrew Sin