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


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 or you can divide your values to 255. like that RGB(52/255, 7/255, 64/255).
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





Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Closures

Difference between const and final in dart

How to leverage Local Storage to build lightning-fast apps

Solution: Two Sum

The proper way of parsing a CSV in Node.JS (in my opinion)

Creating an Analog Clock with CSS and Javascript

Getting started with oclif by creating a todo cli app

Technical SEO for React Users

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aydin Uzmez

Aydin Uzmez

More from Medium

A perfect way to kill the PIP mode activity from another activity.

Complete Guide — In App Update for Android Apps — Google Playstore

Custom Views — Draw Square

App Design Flow — Building Enterprise Apps with Unity