Прокрутка градиента в заголовке с помощью CSS

Question

Я пытаюсь, чтобы заголовок моего сайта показывал градиент прокрутки (представьте, что солнце поднимается при прокрутке вниз).Поднять градиент не проблема;

#header {
  height: 200px;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}

<div id="header"></div>

Однако прокрутка при перемещении страницы является проблемой.Я обнаружил несколько руководств, предлагающих добавить:

  background-size: 400px;
  background-attachment: fixed;

as;

    #header {
  height: 200px;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
  background-size: 400px;
  background-attachment: fixed;
}

Однако заголовок становится полностью темным.Чего мне не хватает?

Answer 1

Это можно смоделировать, применив к телу фоновую окраску и оставив заголовок прозрачным:

#header {
  height: 100px;
  position:fixed;
  left:0;
  right:0;
  top: 0;
  border:3px solid green;
  box-sizing:border-box;
  
}

body {
  min-height:200vh;
  background: 
    linear-gradient(to bottom, transparent 100px,#fff 100px) fixed,
    linear-gradient(to bottom, red, blue);
}

<div id="header"></div>