White line appears at end of gradient filled div at specific browser widths

Question

I have a div with id #gradient_div with a background-image set to linear-gradient. I\'m getting a gap between the end of the linear-gr

Answer 1

I would increase the size of background a little to avoid this:

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: 101% 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>

You can also try to add only 1px it will be probably less than 1%

#gradient_div {
  background-image: linear-gradient(to right, rgba(0, 126, 255, 0.86), rgb(152, 4, 228));
  background-size: calc(100% + 1px) 100%;
  height: 100px;
  margin: 0 1%;
  border: 1px solid black;
}

<div id="gradient_div"></div>