为何多个CSS径向渐变仅第一个生效？是否需为每个渐变创建类？

你写的两个径向渐变语法是对的，但第二个看不到的核心原因是：多个背景堆叠时，第一个渐变处于上层，而它的最后两个色标都是#110b53（和背景色完全一致），这就导致上层的第一个渐变会覆盖掉第二个渐变的大部分区域，只有左上角的彩色部分能显示出来。

修改后的代码 #

把两个渐变的最后一个色标改成透明（transparent），这样上层渐变的非彩色区域就不会遮挡下层渐变，同时保留背景色作为底色：

html {
 background-color: #110b53;
 background: radial-gradient(
 circle at top left,
 #044b8d 5%,
 #110b53 35%,
 transparent 60%
 ),
 radial-gradient(
 circle at top right,
 #8b0460 5%,
 #110b53 35%,
 transparent 60%);
}

是否需要为每个渐变创建单独的类？ #

完全不需要。CSS本身支持在同一个background属性里用逗号分隔多个背景渐变，只要调整好色标的透明度或范围，就能让多个渐变同时显示。

内容的提问来源于stack exchange，提问作者Hamed Fathi