Create Linear Gradients in Html

In the box below we have a simple example with a gradient starting in the top left corner of the box with white and ending at the bottom right corner with black. You can see both the old and new WebKit syntax and the equivalent for other browsers:

.bg{
background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), to(black));
background: -webkit-linear-gradient(top left, white, #05a3ec);
background: -moz-linear-gradient(top left, white, black);
background: -o-linear-gradient(top left, white, black);
background: -ms-linear-gradient(top left, white, black);
background: linear-gradient(to bottom right, white, black);
}

Note that the syntax is likely to change, again, replacing top left (specifying the origin point) with to bottom right (specifying the destination point), as shown on the last line.
It's also possible to specify an angle for the gradient rather than a direction. Zero degrees (0deg) creates a left-right gradient while 90deg creates one going from bottom to top. To duplicate the above effect then we specify an angle of 315deg (equivalent to -45deg):

.bg2{
background: -webkit-linear-gradient(-45deg, #fff, #f1e309);
background: -moz-linear-gradient(-45deg, #fff, #f1e309);
background: -o-linear-gradient(-45deg, #fff, #f1e309);
background: -ms-linear-gradient(-45deg, #fff, #f1e309);
background: linear-gradient(-45deg, #fff, #f1e309);
}

Often with background gradients you will want them to appear only at the edge of the element so as not to obscure any text or images. To do this in WebKit we just move the start point to somewhere further across (down) the element. For Firefox we can also use the trick of repeating the first colour as shown here:

.bg3{
background: -webkit-gradient(linear, 0 50%, 0 100%, from(white), to(red));
background: -webkit-linear-gradient(top, white, white, red);
background: -moz-linear-gradient(top, white, white, red);
background: -o-linear-gradient(top, white, white, red);
background: -ms-linear-gradient(top, white, white, red);
background: linear-gradient(to bottom, white, white, red);
}