如何创建融合双重径向渐变的网站背景

首先纠正你的写法错误：CSS里不能在linear-gradient内部嵌套radial-gradient，你原来的代码逻辑不对——linear-gradient的参数是一系列颜色/色标，不能把另一个渐变作为色值传入。正确的做法是把多个渐变作为独立的背景层，用逗号分隔，浏览器会按顺序叠加这些背景。

要实现你要的对角双径向渐变效果，直接定义两个radial-gradient，分别指定它们的圆心位置即可：

background: 
  radial-gradient(circle at top left, #b1f2ff, #63e5ff, #3cdfff),
  radial-gradient(circle at bottom right, #dd2288, #ff0057, #cc08c7);

关键知识点讲解： #

• 每个radial-gradient后面的at 位置是核心定位语法：你可以用方位词（top left/bottom right/center等）或百分比/像素值（比如at 10% 20%）来精确控制径向渐变的圆心位置。
• 多个背景层的叠加顺序：第一个写的渐变在最底层，后面的渐变依次覆盖在上面。如果想要两个渐变的颜色混合，可以添加background-blend-mode: screen;（或其他混合模式）来调整叠加效果。
• 如果你需要保留linear-gradient的效果，也可以把它作为一个背景层加入，比如：

background: 
  linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3)),
  radial-gradient(circle at top left, #b1f2ff, #63e5ff, #3cdfff),
  radial-gradient(circle at bottom right, #dd2288, #ff0057, #cc08c7);

内容的提问来源于stack exchange，提问作者Noah Dammann