Banishing the Background Stripes from Linear Gradient

When employing the linear-gradient property for a background, you may encounter noticeable stripes when the direction is set to top or bottom. These unsightly artifacts can be attributed to a complex background propagation phenomenon.

In case of a vertically-oriented gradient, the margin of the body element propagates to the HTML element, resulting in an 8px tall area. Subsequently, the linear-gradient extends across this entire height, producing repeating patterns.

Solution:

To address this issue, ensure that the body element has a sufficient height. By specifying a height of any value greater than 0 (e.g., 100vh), you can prevent the background from collapsing and eliminate the distracting stripes. This resolves the propagation issues, allowing the linear gradient to be applied smoothly without disruptions.

<div><div class="snippet-code">
<pre> height: 100vh;
background: linear-gradient(to top, red, yellow);
}</pre>

</p>