How to create a shadow under a div.

Reading time ~1 minute

I thought that today I would show how to create a shadow beneath a div.

div element with shadow beneath it

First create an image of the shadow effect, and slice it into three pieces. The two corners should be the same size and should only be as wide as the curve of the corner necessitates. The third image will be a 1 pixel wide gradient that is as tall as the shadow effect you want is. This is the image that I used for the sample above, and for the dimensions in the CSS below.

Shadow

The following HTML should be at the bottom and within the div that you want the shadow effect for:

<div class="shadow-middle">
<div class="shadow-left"></div>
</div>
<div class="shadow-right"></div>

Then you will need the following CSS:

.shadow-middle {
width: 100%;
height: 21px;
background: transparent url(middle.gif) repeat-x;
position: absolute;
bottom: -21px;
left: 0px;
}
.shadow-left {
width: 36px;
height: 21px;
background: transparent url(left.gif) no-repeat;
}
.shadow-right {
position: absolute;
background: transparent url(right.gif) no-repeat;
width: 36px;
height: 21px;
bottom: -21px;
right: 0px;
}

Also make sure that the enclosing div has a relative position, so that the above CSS forces the shadow just below the bottom of it. If you have a border around your enclosing div, make sure you adjust the bottom positioning to move the shadow below it too. Enjoy!

Update: I’m so glad you don’t have to do this sort of thing any more.

Tin Khan

After five months of working at Saltbox in early 2012, funds ran out. I seriously considered taking a gamble with a work-for-equity offer...… Continue reading

A Comeback for Another Drink

Published on September 25, 2016

Fanonic Update

Published on July 26, 2012