如何依据Figma设置在CSS中创建指定带透明度的径向渐变？

我想要在CSS中实现一个符合Figma设计的带透明度的径向渐变，已附上Figma渐变设置截图与渐变效果截图。我尝试了以下代码，但未得到预期效果：

现有代码 #

CSS

body {
  background-color: #000;
}
.circle {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(118, 60, 172, 1.00) 0%, rgba(50, 15, 133, 0) 100%);
}

HTML

<div class="circle"></div>

代码错误分析 #

• 结束颜色设置错误：你将渐变结束点设为rgba(50,15,133,0)，但Figma中的径向渐变应该是从起始色#763CAC直接过渡到透明，而非切换到另一种颜色再变为透明，这会导致渐变过程中出现不必要的颜色偏移。
• 渐变范围不匹配：默认的radial-gradient(circle)使用closest-side作为渐变大小（渐变从中心到元素最近边缘结束），而Figma里的径向渐变通常会覆盖到元素最远的角落（对应CSS的farthest-corner），两者的过渡范围差异会导致视觉效果不符。
• 停止点位置可能不符合设计：如果Figma中渐变并非到元素边缘（100%位置）才完全透明，而是在更早的位置就完成透明过渡，现有代码的100%停止点会让渐变过渡过于平缓或范围不符。

修正后的代码示例 #

根据Figma常见的径向渐变设置，调整后的代码如下：

body {
  background-color: #000;
}
.circle {
  width: 300px;
  height: 300px;
  /* 使用farthest-corner匹配Figma的渐变覆盖范围，同时让起始色直接过渡到透明 */
  background: radial-gradient(circle farthest-corner, 
    rgba(118, 60, 172, 1) 0%, 
    rgba(118, 60, 172, 0) 70%);
}

如果你的Figma设计包含多段渐变停止点（比如中间有半透明过渡），可以进一步调整停止点：

.circle {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at center, 
    rgba(118, 60, 172, 1) 0%, 
    rgba(118, 60, 172, 0.5) 45%, 
    rgba(118, 60, 172, 0) 80%);
}

注意事项 #

• 可以根据Figma截图中的渐变停止点位置和透明度数值，微调代码中的百分比和rgba透明度值，完全匹配设计稿。
• 如果Figma设置了渐变的自定义原点（比如非中心位置），可以在radial-gradient中添加at x% y%来指定，例如radial-gradient(circle at 20% 30%, ...)。

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