How to make Fading Backgrounds in HTML and CSS

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make Fading Backgrounds in HTML and CSS
Colors enrich the Web and make it come alive. (Jupiterimages/Comstock/Getty Images)

You don't need Flash or third-party plug-ins to impress website visitors. CSS and JavaScript make it possible for you to generate colourful animations and visual effects inside a user's browser. One way to make your website stand out is to fade a Web page's background when a user enters your site. This is an old HTML effect, but it can still attract the attention of digital audiences everywhere.

Skill level:


  1. 1

    Open one of your HTML documents using an HTML editor or Notepad.

  2. 2

    Paste the following JavaScript code in the document's "head" section:

    <script language="JavaScript" type="text/JavaScript">

    var redstart = 0xFF;

    var green Start = 0x00;

    var blue Start = 0x00;

    var endColor = "#FFFFFF"; / white /

    var increment = 10;

    var delay = 80;

    var keep Running = true;

    The first three variables define the colour site visitors see when they open your page. A browser needs three colour values to produce a colour: Red, green and blue. The three variables, "redstart," "greenStart" and "blueStart" represent those three colours. Each colour has a hexadecimal value. The hex value of "redstart," for instance, is "0xFF." Ignore the first two "0x" characters. The last two characters, "FF" are important. They represent the actual colour. "FF" is the equivalent of 255 in decimal notation.

    Hex colour values begin with 00 and increase all the way up to 255. The larger the value, the more intense that particular colour appears. In this example, the red colour, defined by "redstart," is the largest. Its hex value is "FF." The hex values of the "greenStart" and "blueStart" variables are both "00." These three colour values produce a colour that contains nothing but red. Site visitors will see red briefly before it fades to white.

    The "endColor" variable defines the page's final colour. In this instance, that colour is white. The "increment" and "delay" variable determine how fast the fade animation occurs and how smooth that animation appears.

  3. 3

    Paste this code below the code shown in the previous step:

    function fade Background() {

    var prefix = "#";

    var backgroundColor = prefix + getHexVal(redstart) + getHexVal(greenStart) + getHexVal(blueStart);

    document.bgColor = backgroundColor;

    redstart += increment;

    green Start += increment;

    blue Start += increment;

    if (backgroundColor == endColor)

    keep Running = false;


    set Timeout(fade Background, delay);


    This function fades the page's background colour by setting the CSS "bgColor" property to the current colour. The final statement in the function calls the function repeatedly until the background colour reaches the end colour. Each time it calls the function, it decreases the value of the current colour by the value defined in the "increment" variable. The net result produces the fade effect where the background fades from its starting colour to the ending colour.

  4. 4

    Copy and paste the following JavaScript function below the code shown in the previous step:

    function getHexVal(colorVal) {

    var valid Chars = "0123456789ABCDEF"

    if (colorVal > 255) {

    colorVal = "255";


    var hexCharacter1 = Math.floor(colorVal / 16);

    var hexCharacter2 = colorVal % 16;

    var hexVal = validChars.charAt(hexCharacter1) + validChars.charAt(hexCharacter2);

    return hexVal;


    window.onload = function () {

    fade Background();


    The "fadeBackground" function calls this "getHexVal" function. The "getHexVal" function converts decimal colour values to hex. The final two lines of code are the most important. They cause the browser to run everything whenever your Web page loads.

  5. 5

    Save the file and open it in a browser. Your Web page appears and fades from your starting colour to white.

Tips and warnings

  • Visit an HTML colour tutorial website to learn more about how hexadecimal colours work. You can then change the values of "redstart," "greenStart" and "blueStart" to anything you like. For instance, to change your starting colour to green, set the value of "green Start to "0xFF" and the value of the other two colours to "0x00." Make the ending colour black instead of white by changing the value of "endColor" to "#000000";
  • Adjust the values for "increment" and "delay" to fine tune the fade effect and achieve the transition you desire. Decreasing the value of "increment" produces a smoother colour transition effect, but it also causes the effect to take longer to complete. Reducing the value of "delay" speeds up the transition.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.