Adding more colours to the gradient in Html

To add intermediary colours WebKit uses the same method as for radial gradients with the color-stop syntax. Different colours can be inserted at points along the gradient with from() and to() being equivalent to color-stops at 0 and 1.
In Firefox it seems that the gradient always covers the entirety of the element, but they've introduced a short-hand to replace the color-stops, allowing us to achieve similar effects. Colours listed without placement information are evenly distributed over the remaining space, as you can see below:

.bg4{
background: -webkit-gradient(linear, 0 50%, 0 100%, from(white), color-stop(0.5, yellow), to(blue));

background:  -webkit-linear-gradient(top, white 50%, yellow, blue);
background: -moz-linear-gradient(top, white 50%, yellow, blue);
background:  -o-linear-gradient(top, white 50%, yellow, blue);
background:  -ms-linear-gradient(top, white 50%, yellow, blue);
background:  linear-gradient(to bottom, white 50%, yellow, blue);
}

The linear-gradient syntax is equivalent to placing colour stops as: white 50%, yellow 75% and red 100% as the stops without percentage or distance values will spread out equally to fill the remaining space.

.bg5{
background: -webkit-gradient(linear, 80% 0, 100% 0, from(white), color-stop(0.5, yellow), to(blue));

background:  -webkit-linear-gradient(0deg, white 80%, yellow 90%, blue);
background:  -moz-linear-gradient(0deg, white 80%, yellow 90%, blue);
background:  -o-linear-gradient(0deg, white 80%, yellow 90%, blue);
background:  -ms-linear-gradient(0deg, white 80%, yellow 90%, blue);
background:  linear-gradient(0deg, white 80%, yellow 90%, blue);
}