[P][URL=http://docs.webplatform.org/wiki/css/functions/linear-gradient]http://docs.webplatform.org/wiki/css/functions/linear-gradient[/URL][/P][P]
[/P][P]Defines a linear gradient as a CSS image. [/P]Examples[URL=javascript:void(0)] Add comment[/URL][P][URL=http://jsfiddle.net/denbuzze/J2CLV/]View live example[/URL] [/P][P][P]CSS [/P]background: #1e5799;background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%);background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );[/P][P]
[/P]Syntax[URL=javascript:void(0)] Add comment[/URL][P][b]linear-gradient[/b] ([b][[/b] [b][[/b] <angle> [i][b]|[/b] to [/i]< side-or-corner> [i][b]][/b] , [b]][/b] ? [/i]< color-stop> [i][b][[/b] , [/i]< color-stop> [i][b]][/b] +)[/i] [/P]Parameters[URL=javascript:void(0)] Add comment[/URL][i]angle[/i]Optional. The angle the gradient line should assume, expressed as a number followed by an angle units designator(for instance, "deg")."0deg" points upward and positive angles increase in a clockwise direction. Therefore, "90deg" points toward the right, "180deg" points downward, and so on.If no angle is provided, the gradient line starts in the corner or side opposite the corner or side specified by [i]<side-or-corner>[/i]. [i]side-or-corner[/i]Optional value that specifies an ending corner or side for the gradient. This value begins with "to", which is followed by one or two of the following keywords. Including one keyword specifies an ending side, and two keywords specify an ending corner. [ul][li]The following values can be used as the first value only:[ul][li][b]left[/b] Indicates gradient ends on the left.[/li][li][b]right[/b] Indicates gradient ends on the right.[/li][/ul][/li][li]The following values can be used as the second value only:[ul][li][b]top[/b] Indicates gradient ends on the top.[/li][li][b]bottom[/b] Indicates gradient ends on the bottom.[/li][/ul][/li][li]Not including any keywords or angle is equivalent to "to bottom".[/li][/ul][i]color-stop[/i]At least two color stops are required. Each color stop has one or two components—a color component and an optional position component. The first component defines the color component of a stop point for the gradient. Each stop point has its own designated color, and the area between each point is filled with a continuous color transition from one to the other. This value can be any supported color value.Each stop point can have an optional percentage or supported length value that indicates where along the gradient line to place the color stop. "0%" (or "0px", "0em", and so on) indicates the starting point (or side); "100%" indicates the ending point (or side). Compatibility notes[URL=javascript:void(0)] Add comment[/URL][TABLE][tr] Browser Version Note [/tr][tr][td] Internet Explorer [/td][td] 6 [/td][td] filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); [/td][/tr][tr][td] Internet Explorer [/td][td] 10 [/td][td] Supports the previous syntax ("top" instead of "to bottom") as the vendor prefixed version (-ms-linear-gradient), supports the latest syntax ("to bottom" instead of "top") as the non prefixed version (linear-gradient. [/td][/tr][tr][td] Chrome [/td][td] 22 and later [/td][td] Only supports the previous syntax ("top" instead of "to bottom") as the vendor prefixed version (-webkit-linear-gradient) and the obsolete syntax as a vendor prefixed version (-webkit-gradient). [/td][/tr][tr][td] Safari [/td][td] 5.1 and later [/td][td] Only supports the previous syntax ("top" instead of "to bottom") as the vendor prefixed version (-webkit-linear-gradient) and the obsolete syntax as a vendor prefixed version (-webkit-gradient).[/td][/tr][/TABLE]