How to remove the stripes that appears when using linear gradient property [duplicate]

You are facing a complex background propagation that you can read about here. I will try to explain it with simple words.

Your body has a height equal to 0; thus the background won’t be visible on it but by default it has 8px of margin which create a height of 8px on the html element.

Why not 16px of height (8px for top + 8px for bottom)?

Since the height of body is 0 we are facing a margin collpasing and both margin will collapse into only one and we have a height of 8px.

Then we have a background propagation from body to html and the linear-gradient will cover the 8px height.

Finally, the background of the html is propagated to the canvas element in order to cover the whole area which explain why the linear gradient is repeating each 8px.

body {
  background: linear-gradient(to top, red, yellow);
}

It’s also repeated when using left or right direction but you won’t see it visually which is logical since it’s the same pattern:

body {
  background: linear-gradient(to right, red, yellow);
}

You can also remove the repeating and you will see it’s covering only 8px

body {
  background: linear-gradient(to right, red, yellow) no-repeat;
}

In order to avoid this behavior you can simply set height:100% (or min-height:100%) to the html

html {
  height: 100%;
}

body {
  background: linear-gradient(to top, red, yellow);
}

It will also work with no-repeat since by default a linear-gradient will cover the whole are:

html {
  min-height: 100%;
}

body {
  background: linear-gradient(to top, red, yellow) no-repeat;
}