How to make a gradient in Lottie (EASY)

Hello, everyone who loves Lottie,

Today I am gonna show you how to make a gradient easily in Lottie. okay, let's jump in.

first of all. create a new composition

Now double-click the Rectangle tool in the current project.

Click “Rectangle 1”. Add menu “Gradient Fill”.

You can see default gradient fill in Rectangle 1

result

I edited the gradient according to myself. you can edit too from Start Point, End Point. but unfortunately, when you can render your .json, you see colorless. just black and white. this is a problem and we have to fix it.

Export your data.json as black&white and then open it by notepad or something like that. find “k”:[0,1,1,1,1,0,0,0].

What that means “k”:[0,1,1,1,1,0,0,0] ;

“k”:[COLOR1,R,G,B,COLOR2,R,G,B] but not RGB 0-255, RGB 0–1 format. you must convert from 0–255 to 0–1. You can convert website https://www.easyrgb.com/en/convert.php or you can divide your values to 255. like that RGB(52/255, 7/255, 64/255).

easyrgb.com

color1 : rgb(52,7,64) , color2: rgb(110,2,77)

rgb(52,7,64) ---convert---> 0.20392  0.02745  0.25098
rgb(110,2,77)---convert---> 0.43137  0.00784  0.30196

data.json result

Thanks.