Question 256192 in Html Question posted in
Some basic documentation can be found here.

Html – 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; */
}
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Try this :-

    Just add 100% to html tag

    html {
  height: 100%;
}

    *If you add body height 100vh then it will not work when your page has more data and when you start scroll your page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search