LottieFiles
0:000:00

Free Lottie with Conic Gradient (Radial Gradient) Animation

1.2 KB

Example of Lottie with conic radial-gradient achieved using 3 layers. 1st Layer (Bottom): Flat color (RGB) 2nd Layer (Middle): Applied Radial Gradient (from top to mid of ring) 3rd Layer (Top): Masked the 2nd layer to hide the right side of the gradient ring. Note: Use this method when you want to achieve the conic gradient effect. For Radial gradient or Linear gradient, you don't need to create 3 layers, you can do it with just one.

Example of Lottie with conic radial-gradient achieved using 3 layers. 1st Layer (Bottom): Flat color (RGB) 2nd Layer (Middle): Applied Radial Gradient (from top to mid of ring) 3rd Layer (Top): Masked the 2nd layer to hide the right side of the gradient ring. Note: Use this method when you want to achieve the conic gradient effect. For Radial gradient or Linear gradient, you don't need to create 3 layers, you can do it with just one.

Interactions & plugins

View all
figma
after-effects
framer
canva
webflow
wix

Free to use under the Lottie Simple License

cookie

We use cookies for essential website functions and to better understand how you use our site, so we can create the best possible experience for you ❤️