Hello! In continuation of the theme I want to paint over a 150px strip (the first 50px is purple, the second 50px is orange, the third 50px is also purple) I create with the help of the css3 designer, but for some reason I have the whole strip monochromatic ..

.main-hr { width: 150px; height: 2px; display: block; margin: 0 auto; background: #c37488; /* Old browsers */ background: -moz-linear-gradient(top, #c37488 1%, #c37488 32%, #f0b283 32%, #f0b283 33%, #f0b283 34%, #f0b283 66%, #f0b283 66%, #f0b283 67%, #f0b283 67%, #c37488 67%, #c37488 67%, #c37488 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #c37488), color-stop(32%, #c37488), color-stop(32%, #f0b283), color-stop(33%, #f0b283), color-stop(34%, #f0b283), color-stop(66%, #f0b283), color-stop(66%, #f0b283), color-stop(67%, #f0b283), color-stop(67%, #f0b283), color-stop(67%, #c37488), color-stop(67%, #c37488), color-stop(100%, #c37488), color-stop(100%, #f0b283), color-stop(100%, #f0b283), color-stop(100%, #f0b283), color-stop(100%, #f0b283)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #c37488 1%, #c37488 32%, #f0b283 32%, #f0b283 33%, #f0b283 34%, #f0b283 66%, #f0b283 66%, #f0b283 67%, #f0b283 67%, #c37488 67%, #c37488 67%, #c37488 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #c37488 1%, #c37488 32%, #f0b283 32%, #f0b283 33%, #f0b283 34%, #f0b283 66%, #f0b283 66%, #f0b283 67%, #f0b283 67%, #c37488 67%, #c37488 67%, #c37488 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #c37488 1%, #c37488 32%, #f0b283 32%, #f0b283 33%, #f0b283 34%, #f0b283 66%, #f0b283 66%, #f0b283 67%, #f0b283 67%, #c37488 67%, #c37488 67%, #c37488 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%); /* IE10+ */ background: linear-gradient(to bottom, #c37488 1%, #c37488 32%, #f0b283 32%, #f0b283 33%, #f0b283 34%, #f0b283 66%, #f0b283 66%, #f0b283 67%, #f0b283 67%, #c37488 67%, #c37488 67%, #c37488 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c37488', endColorstr='#f0b283', GradientType=0); /* IE6-9 */ } 
 <div class="main-hr"></div>

2 answers 2

It is not uniform, just a vertical gradient.
I did it only for w3c, the generator will help with the rest - I don’t remember their syntax.

By the way, why the beginning of 1%, and not 0? And you have a lot of extra points in it.
Your option is commented out, corrected added.

 .main-hr { width: 150px; height: 2px; display: block; margin: 0 auto; background: #c37488; /*background: linear-gradient(to right, #c37488 1%, #c37488 32%, #f0b283 32%, #f0b283 33%, #f0b283 34%, #f0b283 66%, #f0b283 66%, #f0b283 67%, #f0b283 67%, #c37488 67%, #c37488 67%, #c37488 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%, #f0b283 100%);*/ background: linear-gradient(to right, #c37488 0%, #c37488 33%, #f0b283 33%, #f0b283 67%, #c37488 67%, #c37488 100%); } 
 <div class="main-hr"></div>

    Where you create a gradient, set the direction horizontally. And then you have now top down