Create a gradient reflection effect all without any images (CSS3)

Here is a quick tutorial on how to create a nice gradient with a reflection effect on a div or any other xhtml elements. We will use the CSS3 techniques as all the latest browsers are supporting the standard even if not officially released.

Here is a screen shot of what we want to achieve:

Here are the spec:

• Rounded corners
• Dark gradient (can be any color but dark for this example)
• Reflection effect like the good old Web 2.0

Lets first build our xhtml. Pretty simple for this example:

<div class="gradient">
   <div class="reflect"></div>
</div>

Ok there is no content in it yet but we just define 2 div one that will do our gradient and the other one our reflection effect. Now let’s do our CSS with a 3.0 touch.

Gradient

.gradient{
   position:relative;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   border:1px solid #000;
   background:#222222;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#222222'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#222222)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #666666,  #222222); /* for firefox 3.6+ */
   height:50px;
}

Here we have used the css3 technique for the gradient to support all major browsers. The start color is the color at the bottom of the box and the end color is the one at the top of the box. So we want a gradient that goes from dark to light.

Reflection

.reflect{
   background:#ffffff;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   opacity:0.1;
   filter: alpha(opacity = 10);
   height:50%;
   width:100%;
}

For the reflection, wow this is simple, with background with an opacity of 10%. We need to use the filter alpha for IE to support the transparency.

And we are done, this was fast. Here is the demo:

Gradient-Reflect Demo

Next time we will do a slick menu with this technique. Stay tuned!