CSS linear gradient breaks into horizontal rows

When trying to set a gradient background, instead of displaying a clean and linear gradient, the gradient kinda breaks into rows. I've tried changing gradient generator, so the problem is not the generator, i've tried removing all the other css lines, the only thing that fixes the problem is removing the entire html content. Here is what i mean HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flick.dev</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <h1 class="name">Flick.dev</h1>
            <ul>
                <li><a>Home</a></li>
                <li><a>About</a></li>
                <li><a>Projects</a></li>
            </ul>
            <button class="btn-contact">Contact</button>
        </nav>

    </header>

    <main>
        
    </main>

    <footer>

    </footer>
    
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

body {
    background: rgb(45,20,44);
    background: -moz-linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    background: linear-gradient(135deg, rgba(45,20,44,1) 0%, rgba(81,10,50,1) 25%, rgba(128,19,54,1) 50%, rgba(199,44,65,1) 75%, rgba(238,69,64,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d142c",endColorstr="#ee4540",GradientType=1);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Sans;
    /* background-color: white; */
}

Solution

Thats because your body is not 100% of the screen height. Put height: 100vh on the body.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  background: rgb(45, 20, 44);
  background: -moz-linear-gradient(135deg, rgba(45, 20, 44, 1) 0%, rgba(81, 10, 50, 1) 25%, rgba(128, 19, 54, 1) 50%, rgba(199, 44, 65, 1) 75%, rgba(238, 69, 64, 1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(45, 20, 44, 1) 0%, rgba(81, 10, 50, 1) 25%, rgba(128, 19, 54, 1) 50%, rgba(199, 44, 65, 1) 75%, rgba(238, 69, 64, 1) 100%);
  background: linear-gradient(135deg, rgba(45, 20, 44, 1) 0%, rgba(81, 10, 50, 1) 25%, rgba(128, 19, 54, 1) 50%, rgba(199, 44, 65, 1) 75%, rgba(238, 69, 64, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d142c", endColorstr="#ee4540", GradientType=1);
  height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Sans;
  /* background-color: white; */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flick.dev</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <nav class="navbar">
      <h1 class="name">Flick.dev</h1>
      <ul>
        <li><a>Home</a></li>
        <li><a>About</a></li>
        <li><a>Projects</a></li>
      </ul>
      <button class="btn-contact">Contact</button>
    </nav>

  </header>

  <main>

  </main>

  <footer>

  </footer>

</body>

</html>