cssgradientfigmaradial-gradientscss-gradients

How to recreate this circular gradient in CSS from a Figma design?


I'm trying to recreate a circular gradient in CSS that matches the one I designed in Figma. Here's the image for reference:

Circle Gradient

The gradient I have in Figma is defined as:

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 understand that the linear gradient won't work for a circular shape, so I'm trying to convert this to a radial gradient in CSS, but I'm struggling to get the same look.

Does anyone know how I can reproduce this gradient effect as a circle in CSS? Any guidance or suggestions would be appreciated!

Thanks!

I tried converting this linear gradient into a radial-gradient to mimic the circular look, but I'm not getting the same effect. Here’s the CSS I attempted:

background: radial-gradient(
  circle,
  rgba(231, 51, 255, 0.5) 10%,
  rgba(207, 67, 255, 0.48) 40%,
  rgba(0, 204, 255, 0.5) 100%
);

Here my fiddle


Solution

  • You can use same background which is defined in figma with some minor adjustments. Add below properties and it will look identical

    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%);
      filter: blur(50px);
      transform: rotate(300deg)
    

    Below is working example and if I have misunderstood or missed something then do share.

    .circle-gradient {
      width: 300px;
      /* Adjust as needed */
      height: 300px;
      /* Adjust as needed */
      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%);
      border-radius: 50%;
      filter: blur(50px);
      transform: rotate(300deg)
    }
    <div class="circle-gradient">
    
    </div>