CSS3 Gradients

CSS3 offers two gradient styles, linear-gradient and radial-gradient, which can be used as values for thebackground and background-image properties.
Gradient Style*	Values	Notes
linear-gradient([origin,] color [stop], color[stop] [, color [stop]]*) for example: linear-gradient(bottom left, #fff, #f00 30%,#000) results in a gradient, originating from the bottom left corner of the box and ending at the top right corner; it begins with white, which becomes red 30% of the way across the gradient, which then ends at black	origin specifies the corner of the box and can be a combination of top, left,bottom, right, and center keywords or percentage values (originating from the top left) relative to the size of the box the first color value refers to the color at the start of the gradient; the last colorvalue refers to the end of the gradient; you can have any number of colors in the gradient stop specifies the location of the color in the gradient and can be a length or a percentage relative to the length of the entire gradient	by default, linear gradients originate from the top center of the box by default, the browser attempts to distribute colors evenly across the gradient if only two colors are specified, the default stops are 0% and 100%
radial-gradient([origin,] [shape-or-size-or-both,] color [stop], color [stop] [, color [stop]]*) for example: radial-gradient(30% 30%, circle closest-corner, #fff, #000) results in a gradient originating 30% of the way from the top left corner of the box, radiating out as a circle until it reaches the nearest corner of the box; it starts with white in the center of the circle, and ends with black at the outer edge	origin specifies the corner of the box and can be a combination of top, left,bottom, right, and center keywords or percentage values (originating from the top left) relative to the size of the box shape can be specified as circle orellipse by default; the shape fills the dimensions of the box (so is an ellipse unless the box is square) size can be a keyword: closest-side,closest-corner, farthest-side, farthest-corner, contain, cover size can also explicitly set the dimensions of a radial gradient using a length value (or two length values, if you want to set the horizontal and vertical lengths separately) the first color value refers to the color at the start of the gradient; the last colorvalue refers to the end of the gradient; you can have any number of colors in the gradient stop specifies the location of the color in the gradient and can be a length or a percentage relative to the length of the entire gradient	by default, radial gradients originate from the center of the box by default, the size keyword is set tocontain by default, the browser attempts to distribute colors evenly across the gradient if only two colors are specified, the default stops are 0% and 100%
* Earlier versions of WebKit (the rendering engine used in Chrome and Safari) used a different syntax for gradients. For more information about this syntax, please see www.webkit.org/blog/1424/css3-gradients/.