I'm trying to recreate a circular gradient in CSS that matches the one I designed in Figma. Here's the image for reference:
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%
);
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>