如何将Figma设计中的环形渐变效果复刻到CSS中？

你用径向渐变无法实现目标效果，是因为径向渐变是从中心向外扩散的色彩过渡，而你需要的**环形渐变（绕圆形边缘的色彩过渡）应该用CSS的锥形渐变（conic-gradient）**来实现，结合裁剪技巧可以还原Figma的设计效果。

核心思路 #

Figma里的线性渐变参数是沿特定角度的直线过渡，要转为环形效果，需要把色彩映射到圆形的圆周方向，锥形渐变正好能实现这种绕圆心的色彩分布。再通过裁剪（mask或background-clip）可以实现空心圆环的效果。

具体实现代码 #

1. 填充圆形的环形渐变（色彩绕圆心分布） #

直接使用conic-gradient，对应Figma的渐变角度和色彩节点：

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    from 206.12deg, /* 对应Figma线性渐变的角度 */
    rgba(231, 51, 255, 0.5) 0deg,
    rgba(207, 67, 255, 0.483696) 160deg, /* 转换自Figma的6.69%节点 */
    rgba(0, 204, 255, 0.5) 360deg /* 转换自Figma的108.36%节点 */
  );
}

2. 空心圆环的渐变边框 #

如果需要的是空心环形的渐变效果，可通过background-clip实现（避免border-image不支持圆角的问题）：

.ring {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 20px solid transparent; /* 边框厚度可自行调整 */
  background: 
    conic-gradient(
      from 206.12deg,
      rgba(231, 51, 255, 0.5),
      rgba(207, 67, 255, 0.483696),
      rgba(0, 204, 255, 0.5)
    ),
    #ffffff; /* 中间填充色，需与容器背景色一致 */
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

3. 用mask裁剪环形 #

另一种实现空心圆环的方式是用mask裁剪出环形区域：

.ring-mask {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    from 206.12deg,
    rgba(231, 51, 255, 0.5),
    rgba(207, 67, 255, 0.483696),
    rgba(0, 204, 255, 0.5)
  );
  /* 裁剪出环形：中间透明，边缘保留（70%为内圆半径比例，可调整） */
  mask: radial-gradient(circle, transparent 70%, black 70%);
}

色彩节点转换说明 #

Figma中的线性渐变百分比是沿渐变线的相对位置，转换为锥形渐变的角度时：

• 总渐变范围：108.36% - (-74.73%) = 183.09%
• 第二个色彩节点（6.69%）相对于起点的偏移比例：(6.69% + 74.73%) / 183.09% ≈ 44.47%，对应角度：44.47% × 360° ≈ 160°

这样转换后就能还原Figma里的色彩过渡节奏。

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