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

CSS Online Test


« Previous Tutorial Next Tutorial »



© Copyright 2021. All Rights Reserved.

CodesCracker