Blurry linear gradient stops in chrome

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;
  b         


        

Answer 1

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.

.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%;
}

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

I hope it helps.

Answer 2

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 for demo.