CODEWITHSUNDEEP
cssgradientfigmaradial-gradientscss-gradients
shaqiya laura
shaqiya laura

Reputation: 103

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

Upvotes: 0

Views: 235

Answers (2)

Umer Naseer
Umer Naseer

Reputation: 1

.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

Upvotes: -1

Meet
Meet

Reputation: 702

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>

Upvotes: 0

Related Questions