How To Use Box-Shadow Effectively

Do you want to know how to use box-shadow effectively? Below are a few simple and easy tips to use the box-shadow element of CSS3 effectively. From lifting a button off the page to enhancing your sidebars & containers, these easy tips will be sure to give your site the edge.

1. Simple all-round box-shadow effect



/******  HTML  ******/

<div class="box">
    <a href="#">Some Text Here</a>
</div>

/******  CSS  ******/

.box
{ float: left;
background: #EEE;
padding: 2em 2em 1em 2em;
margin-left: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}

.box a
{ color: #000;
text-decoration: none;}

2. Simple offset box-shadow effect



/******  HTML  ******/

<div class="box2">
    <a href="#">Some Text Here</a>
</div>

/******  CSS  ******/

.box2
{ float: left;
background: #EEE;
padding: 2em 2em 1em 2em;
margin-left: 0.5em;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 5px;

.box2 a
{ color: #000;
text-decoration: none;}

3. Simple “lifting” box-shadow



/******  HTML  ******/

<div class="box3">
    <a href="#">Some Text Here</a>
</div>

/******  CSS  ******/

.box3
{ float: left;
background: #EEE;
padding: 2em 2em 1em 2em;
margin-left: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 2px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 2px;}

.box3 a
{ color: #000;
text-decoration: none;}

4. Simple “lifting” box-shadow with rounded corners



/******  HTML  ******/

<div class="box4">
    <a href="#">Some Text Here</a>
</div>

/******  CSS  ******/

.box4
{ float: left;
background: #EEE;
padding: 40px;
margin-left: 0.5em;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 2px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 2px;

.box4 a
{ color: #000;
text-decoration: none;

Back to the How To page.