Cross Browser Gradients - Basic Linear Gradient
CSS linear gradients (that run along a line) are supported by the latest versions of all major browsers:- Firefox 3.6+
- Webkit 2+ (Chrome, Safari, Konqueror)
- IE 3+
- Opera 10.5+ (not v10.10)
- A start and end point must be specified, each consisting of a pair of space-separated values.
- -webkit-gradient(linear, left center, right center, ...
- These values can be in pixels, percentages, or the keywords top, bottom, left and right (origin is the top left corner).
- -webkit-gradient(linear, left center, right center, ...
-webkit-gradient(linear, 0px 50%, 100% 50%...
- -webkit-gradient(linear, left center, right center, ...
- End position is not required (it can be specified using 'stops').
- linear-gradient(left, ...
instead of -webkit-gradient(linear, left center, right center)
- linear-gradient(left, ...
- The second [space separated] value is not required, defaults to 'center'.
- linear-gradient(left, ...
instead of -webkit-gradient(linear, left center, ...
- linear-gradient(left, ...
- Gradient can be described as an angle (in degrees)
- linear-gradient(45deg,...
- Keyword 'center' will have gradient begin in center of element:
- linear gradient(center,...
- red
- #FF0000
- #FFFF0000
- red
- rgb(255,0,0)
- rgba(255,0,0,1)
- FF: hsl(0,100,100) / Webkit: hsl(0,100%,50%)
- #F00
- #FF0000
- Webkit: -webkit-gradient(linear, left center, right center, from(red), to(blue));
- FF: -moz-linear-gradient(left, red, blue);
- rgba(0, 0, 0, 0)
- hsla(0, 0, 0, 0)
- transparent
Comments [2]

