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

Question

I am pretty new to programming and I imported a code snippet to my CSS to get a hovering effect over links. When I am pushing the code through W3C CSS Validator I get a single error which is from this imported code.

I do not understand what I can do to remove the error, because the hovering effect works perfectly.

Can anyone help me? Would be greatly appreciated!

The error:

Value Error : background 100% is not a color-stop value )

Code:

:root {
  --mainColor: #ffc7c7;
}

.details-schedule {
  align-items: center;
  display: flex;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 16px;
  justify-content: center;
}

.details-schedule a {
  background:
     linear-gradient(
       to bottom, var(--mainColor) 0%,
       var(--mainColor) 100%
     );
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 4px;
  color: #000;
  text-decoration: none;
  transition: background-size .6s;
}

.details-schedule a:hover {
  background-size: 4px 50px;
}

Answer 1

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.