How to remove banding of gradient background

Question

I'm training a little bit of CSS with repl.it and I decided to put a gradient background, but it is giving this error:

https://i.stack.imgur.com/kGFdM.png

I'm using the following code:

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

it was supposed to be an easy thing, but i am not managing to solve this at all.

@Pedro, please refer this answer. `https://stackoverflow.com/questions/11666395/how-can-i-prevent-css-gradient-banding` — xorozo, Mar 30 '21 at 18:47

Baptiste · Accepted Answer · 2021-03-30T18:57:47.073

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>

This error is due to the fact that the body is not filling the page in it's entirety.

score 0 · Answer 2 · answered Mar 30 '21 at 18:48

You need to make your container (the html element) 100% tall, and use no-repeat to stop the repeating pattern of the background gradient.

html {
  min-height: 100%;
}
body {
   background: linear-gradient(180deg, #17748b 0%, #003a8b 100%) no-repeat; 
}

How to remove banding of gradient background

2 Answers2