如何使用CSS实现居中并排的双色渐变背景效果

你之前的代码只声明了单个径向渐变，所以只能生成单颜色效果，CSS的background属性支持同时叠加多个渐变，你可以用这个特性实现需求，具体实现代码如下：

display: flex;
justify-content: center;
align-items: center;
padding: 100px 0;
background: 
  /* 左侧青绿色圆形渐变 */
  radial-gradient(circle, #D0F9F3, transparent 250px) calc(50% - 160px) 50% / 500px 500px no-repeat,
  /* 右侧淡紫色圆形渐变 */
  radial-gradient(circle, #E3E5FD, transparent 250px) calc(50% + 160px) 50% / 500px 500px no-repeat,
  /* 全局底色 */
  #F3F8FF;

参数调整说明：

• 两个渐变配置里的calc(50% - 160px)和calc(50% + 160px)控制两个圆形的水平偏移量，修改160px的数值可以调整两个圆形的间距，数值越大间距越远
• transparent 250px对应你原有代码的渐变扩散范围，如需调整圆形大小可以修改这个数值
• 两个圆形的渐变边缘用透明过渡，重叠区域会自然融合，符合设计图的效果

内容的提问来源于stack exchange，提问作者Jithin Varghese