css - How to remove the stripes that appears when using linear gradient property

Question

This question already has answers here:

Answer 1

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);
}