Stupid Web Tricks: Make backgrounds fade from one color to another

by Guest Contributor | Oct 06, 2003 4:05:00 PM

Tags: Guest Contributor

Takeaway: Learn how to make your pages' background fade from one color to another with a little bit of JavaScript magic.

Click here for our complete list of Stupid Web Tricks.

By Lauren Guzak and Patrick Joseph
(1/26/99, updated 6/22/01)

This one's been around for a while, but when it first hit the scene it elicited more than a few oohs and ahs. In the interest of keeping it from fading away, here's how to make the background of your pages fade from one color to another when the page is loaded.

It's easy to implement, although you'll want to come up with your own color scheme.

Step one
Paste this JavaScript code into the head of your page. Click here.

Step two
To create your own color scheme, just tweak the last line of script:

fade(0,0,0,255,255,255,100);

Play with the seven numbers. The first three are the red, green, and blue values for the starting RGB color; the next three are the same for the finishing color. The final number tells the function how many steps to take from the first color to the last. The higher this number, the slower and more gradual the fade.So the existing numbers tell the page to fade from black (0,0,0) to white (255,255,255) in 150 gradations.

This trick has been updated for compatibility with Internet Explorer 5.5 and Netscape 6.

Lauren Guzak is a project manager for Ask Jeeves, and Patrick Joseph is a freelance writer.