Transparent PNG for Dynamic Background Gradients

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

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

Here’s an example of the HTML

<div class="this_div"></div>

Here’s the final result.

Share and Enjoy:

Posted on March 31, 2010 in CSS Tricks .

Feedback for "Transparent PNG for Dynamic Background Gradients"

No Comments

No comments yet.

RSS feed for comments on this post. TrackBack URL

« Export Parts of MySQL Table to Excel CSV File Using PHP Style WordPress Sub Page Menus »

Services I Offer

About Me

My name is Andy Weigel and I'm a web developer and designer in Pittsburgh, PA.

I focus on combining design with technology to build compelling, creative, easy-to-navigate web sites and custom web applications for organizations and businesses of all shapes and sizes. My specialty is WordPress. And most of all, I love what I do!