CSS Background Gradient Validation

CSS3 Background Gradients Not Validating, Can Someone Tell Me Why? Code Example Inside

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

CSS background gradient validation

You are using vendor specific experimental implementations of CSS properties. They aren't valid CSS.

One of the options for the validator will allow you to downgrade vendor extensions from errors to warnings in the reports (so if you are choosing to use them on a production site you can find any errors that aren't related to using non-standard extensions).

W3 CSS Validation | Value error for gradients

CSS3 has not been finalized yet, meaning the validator is likely not validating against the latest working draft of CSS3. Also, the validator will probably not validate vendor specific css like -moz-* or -webkit-*

see the most recent draft from w3 for the specification on using linear gradients.

BTW, I believe "top" in your code should be "to top" as the direction of the gradient. Example 12 from the draft:

Below are various ways of specifying a basic vertical gradient:

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

CSS: Value Error : background-image is an incorrect operator ) (validation fails)

it's related to the double color stops #ff5722 10% 15%. The validator seems to be not up to date with this new syntax. You can update your code and use:

.color {
     background-image: linear-gradient(to right, rgb(248, 27, 27) 7%, #ff5722 10%, #ff5722 15%, #43a047 50%, #43a047 60%, #7e57c2 92%, indigo);
     background-clip: content-box;
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent;
   } 
p {
   background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red); 
   }

CSS2 Validation error with Gradient

Vendor-specific selectors such as -moz-linear-gradient are not part of the official CSS2 specification, so when the validator finds then, it will throw an error. Personally, I don't mind if stuff like this doesn't validate - it's only a nice, cleanly written gradient.

Which CSS property is correct for gradient background or background-image

I do not believe using background is any different than using background-image. Basically it's like background: url('image.png'); and background-image: url('image.png') -- they're the same thing, it's just that background is a shorthand property that allows you to specify several background properties like background-repeat, background-color, and of course background-image.

So basically the gradient should be specified as a background-image, using background is no different, just another way of specifying it.

As for the W3C validator issue, I think it's because the gradient "functions" all use browser-specific prefixes. I expect that those functions won't become officially-recognizable until HTML5 becomes official.

Hope that helped in any manner.

CSS Validator error = Value Error : background 100% is not a color-stop value )

It seems that this is a quirk, well a bug, of the W3C CSS validator. Any value, e.g. 2%, produces the same error.

If you replace the second var(—mainColor) with an actual color, like blue, or with the hex value of —mainColor then the validator is happy so if passing validation is important to your project then perhaps do that for now.

Incidentally, the validator can’t cope with a color like rgba(0,0,0,1) either so it seems to be it has a problem parsing the brackets.

CSS Background Image Linear Gradient showing unwanted border in Chrome

You can cover more area like below. You make the gradient big enough and you shift it to uncover the top 50% and you will have the same result as you did

.fancy-underline {    text-decoration: none;    background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);    background-position: 0 -50%;    background-repeat: no-repeat;    background-size: 100% 200%;}

<p><span class="fancy-underline">here is some fancy underline</span></p>

---

Related Topics