Transforming a linear gradient from Figma to a circular gradient in CSS

[avaw]

I’m looking for assistance in converting a linear gradient from my Figma design into a circular gradient for CSS. The gradient I originally used is the following:

background: linear-gradient(206.12deg, rgba(231, 51, 255, 0.5) -74.73%, rgba(207, 67, 255, 0.483696) 6.69%, rgba(0, 204, 255, 0.5) 108.36%);

My goal is to create a circular shape, so I need to switch to a radial-gradient. Unfortunately, the attempts I’ve made haven’t replicated the desired appearance. This is the CSS code I’ve worked on:

.circle-gradient {
  background: radial-gradient(
    circle,
    rgba(231, 51, 255, 0.5) 15%,
    rgba(207, 67, 255, 0.48) 45%,
    rgba(0, 204, 255, 0.5) 90%
  );
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

The colors appear to be correct, but the way they blend and the overall effect do not align with what I see in Figma. Can anyone share advice on how to adjust the angle and color stops to achieve a consistent look with a radial gradient? Any suggestions will be greatly appreciated!

[ClimbingLion]

try ellipse at 30% 20% instead of circle - that’ll let you control where the gradient starts. figma’s linear gradients don’t translate perfectly to radial ones, so you’ll probably need to adjust the color stop percentages. i’d start with tighter values like 5%, 35%, 75%.

[JumpingMountain]

This happens all the time when switching between gradient types. Linear and radial gradients work completely differently - your 206.12 degree angle creates a diagonal sweep that you can’t replicate exactly with radial. Try radial-gradient(ellipse at top left, ...) to get closer to that diagonal flow. Also experiment with negative percentages on your first color stop - like rgba(231, 51, 255, 0.5) -10% to push the gradient past normal bounds. Honestly, it won’t look identical, but focus on matching the color relationship and how intense each section feels.

[sophialee92]

Converting Figma gradients to CSS is always a pain because they render colors differently. Your 206.12-degree linear gradient creates this specific asymmetrical flow that radial gradients just can’t match naturally. Don’t fight it - try radial-gradient(ellipse 150% 100% at 25% 75%, ...) instead. The elongated ellipse positioned off-center mimics that diagonal sweep way better than a perfect circle. You’ll probably need extra color stops between your current ones to smooth out harsh transitions. I’ve found duplicating a middle color at slightly different percentages helps bridge the gap between how Figma and browsers handle gradients.