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.


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 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.

Web Development Coding Sessions on Twitch

Hi! It's been a long time since I've posted here, but I thought anyone that liked my old posts here might appreciate this:I'm excited to ...… Continue reading

How I'm starting my React apps now

Published on January 20, 2018

Tin Khan

Published on October 03, 2016