Question: I was trying to replicate this image in pure css using linear gradient. 

[![enter image description here](https://i.stack.imgur.com/h7OCa.png)](https://i.stack.imgur.com/h7OCa.png)

I tried to use gradient stops, but all the colors are blending. Is there any way to make a linear gradient hard-edged?

I have tried:

```
  background-image: -webkit-linear-gradient(left, #252525 0%, #f5f5f5 20%, #00b7b7 40%,#b70000 60%, #fcd50e 80%);

```

and also without using those percentages too, still the same.

Answer: 
What about multiple gradient like this:

```css
.line {
  height:5px;
  background-image:
    linear-gradient(red,red),
    linear-gradient(blue,blue),
    linear-gradient(yellow,yellow),
    linear-gradient(purple,purple);
  background-size:
    calc(1 * (100% / 4)) 100%,
    calc(2 * (100% / 4)) 100%,
    calc(3 * (100% / 4)) 100%,
    calc(4 * (100% / 4)) 100%;
  background-repeat:no-repeat;
}
```

```html
<div class="line">
</div>
```
You need to set stops close together to acheive that, so 2 stops per colour value:

```
background: -webkit-linear-gradient(left, #252525 19%,#f5f5f5 20%,#f5f5f5 39%,#00b7b7 40%,#00b7b7 59%,#b70000 60%,#b70000 79%,#fcd50e 80%,#fcd50e 100%);
background: linear-gradient(to right, #252525 19%,#f5f5f5 20%,#f5f5f5 39%,#00b7b7 40%,#00b7b7 59%,#b70000 60%,#b70000 79%,#fcd50e 80%,#fcd50e 100%);

```

I use this tool to generate css gradients, it's fantastic and very useful:
<http://www.colorzilla.com/gradient-editor/#252525+19,f5f5f5+20,f5f5f5+39,00b7b7+40,00b7b7+59,b70000+60,b70000+79,fcd50e+80,fcd50e+100>