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

September 23, 2024

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)
}