如何在CSS中为单个元素正确应用多个radial-gradient属性？

你的代码语法本身是正确的，多个background-image用逗号分隔是标准写法，第二个渐变没显示大概率是以下原因：

• 元素无明确尺寸：如果.gradient-bg没有设置width和height，仅靠内部内容撑高，可能第二个渐变的显示区域超出了元素范围，导致看不到。
• 渐变颜色范围重叠/被覆盖：两个渐变的结束色都是#090915，如果第一个渐变的覆盖范围刚好盖住第二个渐变的可见区域，或者第二个渐变的颜色过渡范围太小，肉眼难以分辨。

修正后的示例代码： #

...
<style>
.gradient-bg {
  /* 给元素设置明确尺寸，确保渐变有足够显示空间 */
  width: 500px;
  height: 400px;
  background-image: 
    radial-gradient(circle at 100% 15%, #1f3764 2%, #090915 10%), 
    radial-gradient(circle at 0% 50%, red 2%, transparent 10%);
  /* 补充兜底背景色，和原渐变结束色保持一致 */
  background-color: #090915;
}
</style>

...
<div className="gradient-bg">
 <div>...</div>
</div>
...

关键调整点： #

1. 给.gradient-bg添加明确的宽高属性，避免因元素尺寸不足导致渐变无法显示。
2. 将第二个渐变的结束色改为transparent，避免同色的上层渐变盖住第二个渐变的红色区域。
3. 补充background-color作为兜底，保证整体背景色调统一。

如果还是看不到第二个渐变，可以尝试扩大第二个渐变的范围（比如把10%改成20%），或者调整渐变的位置参数，让两个渐变的可见区域更清晰。

内容的提问来源于stack exchange，提问作者Eryk Ken