您不能有多个background，新的会覆盖旧的。您可以做的是在一个background中有多个渐变，例如（尝试滚动）：

body {
  height: 200vh;
  background: 
    linear-gradient(to bottom, transparent 50%, black 50%), 
    linear-gradient(100deg, #8a07ff, #f500d7);
}

#top-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: black;
}

#bottom-half {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 50%;
  background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%);

}

<div id="bottom-half"></div>
<div id="top-half"></div>

每半部分2格
位置：绝对和左侧：0和顶部：50%设置位置
width：100%将其设置为屏幕宽度
height：50%将每个窗口的高度设置为屏幕宽度的一半
背景色：black显然将背景颜色设置为黑色，并且background：linear-gradient（90deg，rgba（255，0，209，1）0%，rgba（151，0，255，1）100%）将背景设置为渐变（您可以在https://cssgradient.io/下生成漂亮的CSS渐变）

只需一个背景设置即可完成此操作。
这个代码段将每个CSS背景设置分开，以使其更清楚。
整个元素得到一个黑色背景，然后定义一个线性渐变的背景图像。它将位于黑色背景色之上。它被给定了大小和位置，并且不重复。
很明显，把颜色和尺寸改成你想要的。

.bg {
  width: 100vw;
  height: 100vh;
  background-color: black;
  background-image: linear-gradient(to right, purple, magenta);
  background-size: 80% 50%;
  background-position: center top;
  background-repeat: no-repeat;
}

<div class="bg"></div>