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