Transparent PNG for Dynamic Background Gradients

CSS Tricks

Here’s a quick little trick I’ve used for a variety of applications. It involves using a transparent png or gif with a gradient to allow you to create dynamic background gradients.

The first step is to create a gradient – I use Fireworks. Adjust the opacity to zero for the top side and 80% for the bottom.

Here’s an example of the CSS

{code type=CSS}
.this_div {
height:50px;
width:100%;
background:url(trans.png) #990 bottom;
}
{/code}

Here’s an example of the HTML

{code type=CSS}

<div class=”this_div”></div>

{/code}

Here’s the final result.

Leave a Reply

Your email address will not be published. Required fields are marked *

What's the Buzz?

Andy is the consummate professional. He is sharp, creative, highly-skilled, and extremely responsive.  A true WordPress whiz. We are very pleased with our new website.

- Lauren McKibben
Incline Equity Partners