Vertical gradient causing scanlines

Advertisements

Trying to place a top-to-bottom gradient as my background, but for some reason vertical gradients are causing the background to create scanlines.

Image Of Issue

Here’s my stylesheet:

body{
    background-image: linear-gradient(red, yellow);
    background-size: cover;
    width: 50%;
    padding-left: 25%;
}

>Solution :

Add a min-width and min-height to your body.

body{
    background-image: linear-gradient(red, yellow);
    background-size: cover;
    min-width: 100%;
    min-height: 100vh;
}

Leave a Reply Cancel reply