css Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    .circular-gradient {
    width: 300px;

    height: 300px;

    background: radial-gradient(circle at center,

    rgba(255, 255, 255, 1) 0%,
enter code here
rgba(240, 240, 255, 1) 25%,

rgba(230, 230, 255, 1) 50%,
rgba(220, 220, 255, 1) 75%,
rgba(210, 210, 255, 1) 100%

    );
    }

    This should do it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search