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: 
Specifying the same stop position for adjacent color stops should produce the hard edge. The standard linear-gradient syntax allows for color hinting (cutting down on the verbosity of this background style), but not all browsers appear to support it.

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

```html
<hr>
```
Just use `linear-gradient`, you can try this.

```css
hr {
  height:10px;
  background: linear-gradient(to right, red 0% 25%, green 25% 50%, blue 50% 75%, grey 75% 100%);
};
```

```html
<hr>
```