LottieFiles
Lottie with Conic Gradient (Radial Gradient)
0:000:00

Free Lottie with Conic Gradient (Radial Gradient) Animation

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.

  • Optimized dotLottieRecommended

    Smallest file size with themes and interactivity.

  • dotLottie
    1.2 KB

    Compressed, supports theming and states.

  • Optimized Lottie JSON
    2.6 KB

    Optimized JSON for faster loading.

    40% smaller than Lottie JSON
  • Lottie JSON
    4.4 KB

    Standard Lottie format, broad compatibility.

Other export formats

Interactions & plugins

View all
figma
after-effects
framer
canva
webflow
wix

Free to use under the Lottie Simple License