Browser compatibility with syntax varies slightly.
Does this meet your needs? (standard format without vendor prefixes)
background: linear-gradient(90deg,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
http://jsfiddle.net/mNZDP/6/
90deg
indicates a horizontal gradient direction. It's more straightforward compared to the longer explanations like "left top, right bottom". When no direction is given, it defaults to top to bottom.
Regarding vendor prefixes:
Chrome, Opera, and IE10+ follow the standard. To support older versions like Android, iOS6 or Safari 6, use the -webkit-
prefix.
IE doesn't require prefixes for gradients unlike some suggest using -ms-
. For IE9 or below support, a fallback is necessary.
Usually, -moz-
or -o-
prefixes are not needed unless in specific cases.
Note: Older Webkit versions may have a different syntax, especially on Android 2.3.
Refer to the spec for more info: http://dev.w3.org/csswg/css-images-3/
Also check out Can I Use to see browser support details.