Creating "infinite gradient" bars

The following block has a background image that has the illusion of a gradient which fades infinitely. That is, no matter how WIDE the element is, the background looks as if it's faded.

The following is the same effect, except from the other side:

You should notice that the page doesn't break simply because the you alter the width of your browser window. Since the images are backgrounds, they simply get clipped. And as the browser window expands, it simply substitutes the background-color to which you've faded.

The two above cases are the easy ones, "fade to white." However, if we simply reverse the images, we can fade to the other color.

Here's the first example fading to the color:

Here's the second example fading to the color:

The following CSS makes use of multiple classing so that the code can be shorter. There's really no trick to any of these techniques. In fact, all of the effects above, are simply variations of the CSS background property. You can look at the source of this document to better understand.

div.fade { 
	height: 5em; 
	background: #fff url(blank.gif) repeat-y;
}

div.one {
	background-image: url(http://www.microsoft.com/library/toolbar/3.0/gradient.aspx?a=0A6CCE&b=FFFFFF&w=250&h=42&d=ltr&c=NAbKOqnrunJiULJyhm6k3VulBy4%3d);
}
div.two {
	background-image: url(http://www.microsoft.com/library/toolbar/3.0/gradient.aspx?a=FFFFFF&b=3F8CDA&w=400&h=1&d=ltr&c=9voXwao2n8RHkUH%2bmSK1HX5FMl4%3d);
}
div.one-color {
	background-color: #0a6cce;
}
div.two-color { 
	background-color: #3f8cda;
}
div.left {
	background-position: top left;
}
div.right {
	background-position: top right;
}