As of December 2011, there is still no standard CSS gradient implementation, which means using CSS gradients in a cross-browser way requires using many different vendor-prefixed versions. There are currently five different vendor-prefixed versions of CSS gradient:

• -ms-linear-gradient and -ms-radial-gradient for Internet Explorer 10+
• -moz-linear-gradient and -moz-radial-gradient for Firefox 3.6+
• -o-linear-gradient and -o-radial-gradient for Opera 11.10+
• -webkit-linear-gradient and -webkit-radial-gradient for Safari 5+ and Chrome
• -webkit-gradient for Safari 4+ and Chrome (aka "Old WebKit")

This rule raises an issue when one vendor-prefixed gradient is used without all of the others.

Noncompliant Code Example

/* Noncompliant: Missing -moz, -ms, and -o */
.mybox {
  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%);
}

/* Noncompliant: Missing old and new -webkit */
.mybox {
  background: -moz-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%);
}

Compliant Solution

.mybox {
  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%);
}

See

• CSSLint rule documentation