Choose Your Theme
Warren Shea

Tutorial: CSS3 DIV Shadow

Tuesday, January 17th, 2012 at 2:36 pm

Purpose of this tutorial
To put a nice, subtle shadow just below a DIV. This shadow fades out to the background and is alpha transparent.

What you need to know

While this generally works on any website, it doesn’t work too well with my themes, other than Google+ theme. I suggest you use that theme to properly see this.



  .box_example {
    border:1px solid #aaa;
    border:1px solid #666;
    box-shadow: 0 0 10px #000;
    border-radius:100px / 7px;

<div class=”box_example”></div>

The key things are
.box_example’s position:relative
and…all of .box_example:after‘s CSS.
I guess playing around with the CSS to get the shadow you want. There’s not much else to discuss…lol worst tutorial ever :)

My ramblings
I just found this out through a co-worker and I’m using it everywhere. I think it’s a very simple, subtle way to make an item pop out a little more. FYI he first saw it on LinkedIn, here

Leave a Reply