Question: If I am using a linear gradient with multiple stops like this:

```
div
{
  border: 1px solid black;
  width: 100px;
  height: 2000px;
  display: inline-block;
  background-image: linear-gradient(to bottom, #383937 0, #001500 35px,
    #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%);
}

```

**Firefox**
Problem free.

**Chrome**
The transitions between gradient colors are blurry.
I am reusing a position to define a new color, so on position 35, the color goes from #001500 to #ffffff instantly (or at least should). The blurryness between gradient stops increases if the div is taller.

**IE**
There is some blurryness like in chrome, but less extreme. Like in Chrome, the blurryness increases if the div is made higher.

<http://jsfiddle.net/cyq7grdr/5/>

The gradient in firefox:

![gradient in firefox](https://i.stack.imgur.com/zhkyD.png)

The gradient in chrome:

![gradient in chrome](https://i.stack.imgur.com/bLj6k.png)

The gradient in chrome when the div is less tall (1000px instead of 2000px):

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

edit
====

It seems like this is fixed in chrome, but introduced in firefox. If anyone can confirm this, I would be happy.

Answer: 
Not a fix to the problem, just a workaround… you can use multiple gradients as multiple backgrounds of a small enough size as to not trigger the problem (< ~300px seems to do it). Combine with `background-size` and `background-position` and you get something that is ugly, but works:

```
background-image:
    linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px),
    linear-gradient(to bottom, #963 0, #abc 150px);
background-size:
    100px 150px,
    100px 150px;
background-position:
    0 0,
    0 150px;
background-repeat: no-repeat;

```

See [JSFiddle](http://jsfiddle.net/cyq7grdr/11/) for demo.
I just had this requirement in a project and solved it this way:

Let's say we want the color change to be 50%.

* We must place the gradient of the first color from 0% to 51%.
* And the gradient of the next color from 50% to 100%.

In this way they overlap and create a cut color effect.

```css
.background-overlap {
  background: rgb(97, 0, 189);
  background: linear-gradient(0deg, rgba(46, 49, 49, 1) 0%,  rgba(46, 49, 49, 1) 51%, rgba(232, 232, 232, 1) 50%, rgba(232, 232, 232, 1) 100%);
}

.mydiv {
  height: 90vh;
  width: 100%;
}
```

```html
<div class="background-overlap mydiv"></div>
```

I hope it helps.