CSS box-shadow Property Example

Updated on August 13, 2015     Kisan Patel

This tutorial will go through the box-shadow property of css. A css box-shadow property will give an element of html a new look by adding different styled shadows.

Syntax:

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

Explanation of all attribute values used in above box-shadow syntax:

1. The horizontal offset (required):
   • A positive value will make the shadow lie on the right of the box.
   • A negative offset will make it lie on the left of the box.
2. The vertical offset (required):
   • A negative value makes the shadow lie above the box.
   • A positive value make it lie below the box.
3. The blur radius (required):
   • Sharp shadows come with a value of 0, and the higher the number, the more blurred it will be, and the further out the shadow will extend.
4. The spread radius (optional):
   • Positive values increase the size of the shadow.
   • Negative values decrease the size.
   • Default is 0 (the shadow is same size as blur).
5. Color (required):
   • Using HEX color: e.g. #bbb, #9895AF ect.
   • Using RGBA color: e.g. rgba(192,192,192,0.3);

Here is the example of css box-shadow property:

<!-- HTML -->
<div class="box basic">
 <h1>C# Code (csharpcode.org)</h1>
</div>

<!-- CSS -->
<style type="text/css">
body {
   background:#E6E6E6;
}
.box {
   width:70%;
   height:100px;
   background:#FFF;
   margin:40px auto;
   text-align:center
}
.basic{
   -webkit-box-shadow: 0 10px 6px -6px #777;
   -moz-box-shadow: 0 10px 6px -6px #777;
   box-shadow: 0 10px 6px -6px #777;
}
</style>

A basic shadow applied to a box like above will look like this:

See the Pen mJgmyM by Kisan (@pka246) on CodePen.