线性渐变无法全彩色显示

Question

Hi I am trying to add a linear-gradient on an element with a full color-stop when it reaches 50% of the element but nothing seems to be displayed.

I created an example in codepen:

https://codepen.io/anon/pen/mwaGQW

This is the code I am using for adding the background image:

 background-image: linear-gradient(to right, color-stop(50%, #94A14E), color-stop(50%, #C5C5C5));

Can anyone tell me what am I doing wrong?

Answer 1

Yeah your gradient syntax is wrong: check MDN

Should be something like:

background-image: linear-gradient(to right,#94A14E 50%, #C5C5C5 50%);

Answer 2

Here is a working snippet, correct syntax is 'linear-gradient(to right,#94A14E 50%, #C5C5C5)'

 (function() { let element = document.querySelector('.ceva'); element.style.backgroundImage = 'linear-gradient(to right,#94A14E 50%, #C5C5C5)' })() 

 .ceva { width:300px; height:300px; } 

 <div class="ceva"></div>