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?

In working with Andy, I was extremely impressed by his overall expertise and the “can-do” attitude with which he approached every phase of the project. While some designers may have become frustrated by working with multiple decision makers with limited web development knowledge, Andy was very understanding and strategic in his approach to finding very organized solutions to address our needs. I would highly recommend him!

- Allison Davies
Ten United