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 a true professional who is one of the most capable people I have ever worked with. His enthusiasm for his job is impressive and his ability to adapt and evolve to a new task is incredible. He is one of those rare people who you can tell where you want to get to and he can engineer the path there for you and give you extra choices along the way. His ability to learn new skills, willingness to continue to grow and expand is astounding. He’s also very skilled at what he does now and has a great eye for design and usability, blending form and function with class. And he’s fun to spend time with.

- Claire Devereux Thompson
Sterling Advertising