如何仅用CSS实现模糊渐变背景？避免使用背景图

可以仅通过CSS实现该背景效果，核心思路是多层渐变叠加+遮罩/混合模式，以下是具体实现方向：

1. 拆解目标背景结构 #

从你提供的图来看，背景由两部分核心元素组成：

• 中心深色实心圆区域
• 外围多层带有放射状纹理的环形渐变带，纹理呈现周期性明暗交替，整体颜色从中心向外逐渐变浅

2. 核心实现方法 #

方法一：径向渐变+多层锥形渐变叠加+混合模式 #

• 底层用radial-gradient构建中心深色圆到外围浅色的基础径向过渡底色
• 上层叠加多个conic-gradient创造放射状明暗纹理，通过background-size和background-position控制每个纹理层的环形范围，再用mix-blend-mode（如multiply、overlay）让纹理与底层底色融合，模拟原图层次感

示例代码框架：

.target-bg {
  width: 400px;
  height: 400px;
  /* 底层径向渐变底色 */
  background: radial-gradient(circle at center, #0a0a0a 0 12%, #1a1a1a 12% 28%, #2a2a2a 28% 48%, #3a3a3a 48% 100%);
  /* 叠加放射纹理层，可复制多层调整参数 */
  background-image: 
    conic-gradient(from 0deg, transparent 0deg 5deg, rgba(0,0,0,0.3) 5deg 10deg, transparent 10deg 15deg),
    conic-gradient(from 3deg, transparent 0deg 5deg, rgba(0,0,0,0.2) 5deg 10deg, transparent 10deg 15deg);
  background-size: 100% 100%, 100% 100%;
  background-blend-mode: multiply;
}

方法二：锥形渐变+径向遮罩 #

• 用conic-gradient生成放射状纹理，再通过mask-image的径向渐变作为遮罩，只保留环形区域的纹理
• 叠加多个带不同遮罩的锥形渐变层，每层对应一个环形带，调整纹理角度、颜色深浅匹配原图

示例代码框架：

.target-bg {
  width: 400px;
  height: 400px;
  position: relative;
  background: radial-gradient(circle at center, #0a0a0a 0 12%, transparent 12%);
}
.target-bg::before, .target-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* 第一层环形纹理 */
.target-bg::before {
  background: conic-gradient(from 0deg, #111 0deg 8deg, #222 8deg 16deg);
  mask-image: radial-gradient(circle, transparent 28%, black 28% 48%, transparent 48%);
}
/* 第二层环形纹理 */
.target-bg::after {
  background: conic-gradient(from 4deg, #151515 0deg 8deg, #252525 8deg 16deg);
  mask-image: radial-gradient(circle, transparent 12%, black 12% 28%, transparent 28%);
  mix-blend-mode: overlay;
}

3. 微调建议 #

• 调整渐变的颜色值、角度区间（如0deg 8deg）匹配原图纹理密度
• 修改径向渐变的百分比参数（如12% 28%）控制环形带宽度
• 尝试不同mix-blend-mode值，找到最接近原图的融合效果

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