Box Shadow

Using CSS instead of images for a box shadow.

by Mohamed Rias

HTML

<div id="regular"><!-- IE --></div>
<div id="inset"><!-- IE --></div>

CSS

body{
    margin: 25px 0 0 50px;
}
#regular{
    -webkit-box-shadow: 0 0 45px #383838;
    -moz-box-shadow: 0 0 45px #383838;
    box-shadow: 0 0 45px #383838;
    /*Below are just styles I need for demonstration*/
    height:200px;
    width:200px;
    background: #c4c4c4;
}
#inset{
    -webkit-box-shadow:inset 0 0 45px #383838;
    -moz-box-shadow:inset 0 0 45px #383838;
    box-shadow:inset 0 0 45px #383838;
    /*Below are just styles I need for demonstration*/
    height:200px;
    width:200px;
    background: #c4c4c4;
    margin-top: 25px;
}

JavaScript

// No Javascript here, just information.

// In the CSS you will notice that I had to add some other styles in order to demonstrate this. You will be able to use your own basic styles for your divs, but will need to add the "box-shadow" if you want it. Also, I have made the shadow way more dramatic than it needs to be. Please don't actually use that.

// Instead of using a hex (#) value for your shadow, you can also use "rgba()" where you will need to specify the RGB of the color you want, then the Alpha (transparency) level. For example "rgba(255,255,255,.5)" will give me white at 50% opacity.