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>
```
late to this. but this is my solution, you can set the % on the color where to start and stop and overlap the following that will create a hard stop.

```css
.gradient{
  height:3px;
  background-image:linear-gradient(to left, 
    #252525 0% 20%, 
    #f5f5f5 20% 40%,
    #00b7b7 40% 60%,
    #b70000 60% 80%,
    #fcd50e 80% 100%
  );
}
```

```html
<div class='gradient' />
```