Question

Can someone tell me why the following css is not validating? I’ve been trying to research this myself with no luck. All of the documentation I’ve read says this is the proper why to do gradients in css3.

#header {
  color: white;
  font-size: 12px;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  background: black;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  background: linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
  width: 100%;
  height: 35px;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  position: fixed;
  top: 0px;
  z-index: 1000;
}

These are the validation errors I’m getting:

W3C CSS Validator results for TextArea (CSS level 3)

Sorry! We found the following errors (6)

URI : TextArea

6 #header Value Error : background-color
-moz-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value :
-moz-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )

7 #header Value Error : background-color -webkit-gradient(linear,left
top,left bottom,color-stop(0%,rgba(0,0,0,0.65 )
),color-stop(100%,rgba(0,0,0,0 ) ) ) is not a background-color value :
-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.65 ) ),color-stop(100%,rgba(0,0,0,0
) ) )

8 #header Value Error : background-color
-webkit-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value :
-webkit-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )

9 #header Value Error : background-color
-o-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -o-linear-gradient(top,rgba(0,0,0,0.65
) 0%,rgba(0,0,0,0 ) 100% )

10 #header Value Error : background-color
-ms-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -ms-linear-gradient(top,rgba(0,0,0,0.65
) 0%,rgba(0,0,0,0 ) 100% )

11 #header Value Error : background-color
linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not
a background-color value : linear-gradient(top,rgba(0,0,0,0.65 )
0%,rgba(0,0,0,0 ) 100% )

Answer 1

This is a duplicate of: CSS background gradient validation

A good explanation is:

“Valid” is a very fluid term in regards to CSS3 in modern web design /
development.

If you tried to validate ‘this’ code in W3C’s CSS3
Validator, it will show a bunch of parsing errors. This is due to the
nature of CSS3 implementation at the moment, and mainly because of the
vendor prefixes required to create CSS3 gradients.

Now on the flip
side, we have used correct and “valid” syntax according to the
browser vendors for these gradients. The fact that W3C has yet to
finalize the CSS3 specifications means until then we will not have a
concrete answer as to what is valid or invalid when it comes to CSS3.
All we can do right now is follow progressive enhancement techniques,
and pay attention to the browser vendors for direction and proper
implementation of CSS3.

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/comment-page-1/#comment-243334