How to Remove the Stripes That Appears When Using Linear Gradient Property

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

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

How to remove banding of gradient background

To make the background fill the webpage, you should give the html element a property of height: 100%, and the background a property of no-repeat like so :

html{
    height:100%
}

body {
    background: linear-gradient(to bottom, #17748b, #003a8b) no-repeat;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Linear gradient disappears after an instant

You need to give your body a min height of 100% and the html element a height of 100% (You need to use min-height otherwise if your content is longer than the viewport height, the background won't show on the bottom overflow)

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

CSS | why does the linear gradient do have slides when the direction is set top/bottom?

Add this to your css. The height of your html and body is not getting the whole height of the page size.

html,body {
  height: 100%
}

Linear Gradient in CSS

To set gradient position you can simply use "deg" you can open inspect element in your browser to adjust according to your requirement.

Default position is top to bottom
background-image: linear-gradient(#92EFFD, #4E65FF);

background-image: linear-gradient(180deg , #92EFFD, #4E65FF);

CSS3 gradient background set on body doesn't stretch but instead repeats?

Apply the following CSS:

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Edit: Added margin: 0; to body declaration per comments (Martin).

Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).

How to Remove the Stripes That Appears When Using Linear Gradient Property