How do I let the bottom of the page degrade with Javascript?

Question

It would be something like the image below; I have no idea how to do this.

I don’t want to use image, I want to generate with code.

Answer 1

With pure CSS

As an alternative suggestion to what was asked, follows a much simpler solution, which dispenses with the use of JS, with a pure and relatively simple CSS:

body {
   background-image: -ms-linear-gradient(top, #FF3300 0%, #EEFF00 100%);
   background-image: -moz-linear-gradient(top, #FF3300 0%, #EEFF00 100%);
   background-image: -o-linear-gradient(top, #FF3300 0%, #EEFF00 100%);
   background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #FF3300), color-stop(1, #EEFF00));
   background-image: -webkit-linear-gradient(top, #FF3300 0%, #EEFF00 100%);
   background-image: linear-gradient(to bottom, #FF3300 0%, #EEFF00 100%);
   /* conforme sugerido pelo @PapaCharlie, seguem soluções pra IE mais velho:
   /*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(
      startColorStr='#FF3300', endColorStr='#EEFF00', GradientType=0);
   /*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
      startColorStr='#FF3300', endColorStr='#EEFF00', GradientType=0)";
}

Upshot:

Run your tests on Jsfiddle, or use this tool to automatically generate the CSS for you.

With JS

I’m not going to repeat the code that is already in @brasofilo’s solution (which has already received my vote as well), because I’m basically complementing the idea he presented, with a way to use the gradient solution presented as a background image. For this, this method can be used:

Canvas.toDataURL("image/png")

Application example in Jquery:

$('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });

Beware of certain solutions supposedly in "Javascript" by the web. While researching external alternatives, I noticed that many of them simply generate a CSS, and what’s worse, inferior to the one posted in the reply.

Answer 2

The great onetrickpony has an example using the HTML element canvas. According to the documentation, the element is supported by Firefox 1.5+, IE 9+, Chrome and Opera 9. For versions smaller than IE 9, it is necessary to use the library Explorer Canvas.

HTML

<canvas id="gradient"></canvas>

CSS

canvas#gradient {
    display: block;
    height: 100%;
    width: 100%;
}

JS

var
  canvas = document.getElementById('gradient'),
  context = canvas.getContext('2d'),
  gradient = context.createLinearGradient(0, 0, 0, canvas.height);

gradient.addColorStop(0, '#ffffaa');
gradient.addColorStop(1, '#770000');  

context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);

Jsfiddle