What do I need to do to assuage R# when it complains about my linear gradient?

Question

I've got this CSS rule:

.featured .content-wrapper {
    background-color: #7ac0da;
    background-image: -ms-linear-gradient(left, #7ac0da 0, #a4d4e6 100%);
    background-image: -o-linear-gradient(left, #7ac0da 0, #a4d4e6 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
    background-image: -webkit-linear-gradient(left, #7ac0da 0, #a4d4e6 100%);
    background-image: linear-gradient(left, #7ac0da 0, #a4d4e6 100%);
    color: #3e5667;
    padding: 20px 40px 30px 40px;
}

...and R# complains about the last background-image line with, Expected one of: <angle>, to, <named-color>, <system-color>, <color>, rgb(), rgba(), hsl(), hsla().

I don't know what it wants, though - how do I modify that line to appease the white-gloved mother-in-law that R# sometimes appears to be (don't get me wrong - I love her, anyway)?

Answer 1

Because that isn't valid CSS. To quote MDN:

Formal grammar: 
linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                  \---------------------------------/ \----------------------------/
                    Definition of the gradient line         List of color stops  

               where <side-or-corner> = [left | right] || [top | bottom]
                 and <color-stop>     = <color> [ <percentage> | <length> ]?

So you want

background-image: linear-gradient(to left, #7ac0da 0, #a4d4e6 100%);

See the history of the syntax section for why the vendor-specific versions looks the way they do.

With my R# (7.1), the vendor-specific versions are all hinted Unknown vendor specific extension 'whatever', and their function arguments aren't actually being checked for validity at all.