Converting linear gradient from Figma to CSS radial gradient for circular shape

Other Questions Figma
1

I’m looking for assistance in transforming a linear gradient from my Figma design into a radial gradient for CSS. My original gradient in Figma is shown below:

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%);

I realize that linear gradients aren’t suitable for circular designs, so I’ve attempted to create a radial gradient instead, but the results aren’t matching my expectations.

Here’s the approach I’ve taken:

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

The color transitions don’t blend as they do in Figma, and the overall effect appears inconsistent. Can anyone suggest how to align the CSS output more closely with the design I created in Figma? What adjustments am I missing?

2

The color space difference between Figma and CSS is probably part of your problem. Figma interpolates colors differently than browsers do by default. Try adding in oklch or in srgb to your gradient - something like radial-gradient(circle in oklch, ...) usually gives smoother transitions that match Figma better. That 206 degree angle in your linear gradient shows the lightest part was positioned somewhere specific. You’ll need radial-gradient(circle at 35% 20%, ...) or similar to replicate that positioning. The negative percentage in your Figma gradient means it extended beyond the shape boundaries, so try using percentages that go slightly past 100% in your radial version.

3

Your percentages are way too spread out - that’s the main issue. Radial gradients work completely differently than linear ones. They spread colors from the center outward, not in a straight line like Figma does. Try compressing your stops to something like 0%, 25%, 70%. Also, Figma and CSS handle color blending differently, so you’ll probably need to add some extra color stops between your main ones to get smoother transitions. One trick: use radial-gradient(circle at 30% 30%, ...) to move the center point around. Sometimes offsetting it helps match what you’re seeing in Figma, especially on circular shapes.

4

the main issue is you’re using radial-gradient when conic-gradient would work better here. radial spreads from center outward, but your figma design shows directional flow. try conic-gradient(from 206deg, rgba(231, 51, 255, 0.5), rgba(207, 67, 255, 0.48), rgba(0, 204, 255, 0.5)) on your circle instead.

5

figma gradients can be tricky to replicate. maybe adjust those radial percentage values - try 0%, 30%, 80% for better blending. also, consider changing circle to ellipse at center for improved control on how it applies.