Untitled

<body>
    <header>
        Header
    </header>
    <main>
        Main
    </main>
</body>

body {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 300px;
  background-attachment: fixed;

  /* background-image: linear-gradient(to bottom, black 0px, white 300px); */

  /* The code above is working but the code below is not. Note that the color at the bottom line of header is supposed to be white. */

  background-image: linear-gradient(to bottom, black 0%, white 100%);
}

main {
  height: 2000px;
}