如何使用CSS background实现含渐变径向图形的纯代码背景效果

完全可以通过CSS实现，不需要引入图片资源，核心思路是拆分圆形的「填充色」和「透明淡出效果」两层逻辑，配合CSS多图层背景和mask属性实现，不需要额外添加DOM节点。

核心逻辑 #

你之前卡壳的点是想直接用radial-gradient同时实现线性填充和边缘透明，这本身做不到，我们可以把两个效果拆分实现：

1. 用linear-gradient定义每个圆形内部的填充效果，通过background的位置、尺寸参数控制圆形的位置和大小
2. 用radial-gradient做mask遮罩，实现圆形从圆心到边缘逐渐透明的淡出效果，mask的位置、尺寸和对应圆形的参数完全匹配即可

示例代码 #

/* 给需要添加背景的元素设置如下样式 */
.target-element {
  /* 可根据实际需求调整宽高 */
  width: 100%;
  min-height: 100vh;
  
  /* 背景层按从上层到下层的顺序排列：所有圆形填充层在前，最底层主渐变在后 */
  background:
    /* 第一个圆形：填充渐变 + 位置20% 20% + 尺寸320px*320px + 不重复 */
    linear-gradient(120deg, #60a5fa, #a78bfa) 20% 20% / 320px 320px no-repeat,
    /* 第二个圆形：填充渐变 + 位置80% 70% + 尺寸450px*450px + 不重复 */
    linear-gradient(45deg, #f472b6, #fbbf24) 80% 70% / 450px 450px no-repeat,
    /* 最底层的全局线性渐变，你已经实现的部分直接替换即可 */
    linear-gradient(180deg, #0f172a, #1e293b);
  
  /* mask层和圆形填充层一一对应，位置尺寸完全匹配 */
  mask:
    radial-gradient(circle, #000 0%, #000 65%, transparent 100%) 20% 20% / 320px 320px no-repeat,
    radial-gradient(circle, #000 0%, #000 65%, transparent 100%) 80% 70% / 450px 450px no-repeat;
  /* 兼容webkit内核浏览器 */
  -webkit-mask:
    radial-gradient(circle, #000 0%, #000 65%, transparent 100%) 20% 20% / 320px 320px no-repeat,
    radial-gradient(circle, #000 0%, #000 65%, transparent 100%) 80% 70% / 450px 450px no-repeat;
}

参数调整说明 #

• 新增圆形时，只要按顺序在background属性最前面加对应的linear-gradient层，同时在mask属性最前面加对应的radial-gradient层，保证两者的位置、尺寸参数完全一致即可
• 调整radial-gradient中的65%阈值，可以控制圆形边缘的淡出范围：数值越小，透明过渡的区域越宽，圆形边缘越柔和
• 每个圆形的填充渐变角度、颜色、位置、尺寸都可以单独设置，互不影响
• 该方案兼容Chrome 55+、Firefox 53+、Safari 15.4+，覆盖绝大多数主流用户场景

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