Using Color Gradient in Kodular Components

Hi friends!
After using this platform for months, I have finally gained some experience to share a guide here.

In this guide I will show you how to use Color Gradient in Kodular elements like Horizontal Arrangements, Vertical Arrangements, Buttons etc. along with demo in a video tutorial.

Well, there is already a known method to use Gradient Effect in Kodular, that is by using a background image with gradient color (which you can easily download from But if that is the solution, then there is no point in writing this guide. So, there is a better method.

:arrow_forward: First Step

Well, I know there are paid extensions for Gradient Effect. But here I am going to share with you a totally free extension for the very effect.

To be able to use gradient in Kodular, you have to download the extension called KIO4 Gradient developed by We’ll talk more about KIO4 Gradient and its use next in the guide. But, before that just download the extension from any of the below links:

:arrow_down: Download Link 1 (Recommended | Modified for better icon visibility in Kodular)
:arrow_down: Download Link 2 (Original Version)

It is a non-visible component and is only used with the layout components: Vertical Arrangement and Horizontal Arrangement .

:information_source: How to Use

After adding it to your project, you will find it’s design view and block view. Let’s discuss each view one by one.

Design View

In Design View you’ll find the following properties:

Corner Radius: Using this property one can add rounded corners to vertical and horizontal arrangements.

Shape: For this property you can use intergers from 0 to 3 for Line, Oval, Rectangle and Ring shapes respectively.

Type: Using this property one can select the style of gradient i.e., Linear Gradient , Radial Gradient and Sweep Gradient for the values 0 , 1 and 2 respectively.

Block View

In its main block (i.e. call KIO4_Gradient.Gradient) you’ll have:

Layout: In this, you have to connect the block for your Vertical or Horizontal arrangement where you want to show the gradient.

List Of Colors: Here you have to create a list using the list block and there you have to add different colors as list items to show the gradient.

Orientation: You can have eight orientations for you color gradient. It can have an integer block with value from 1 to 8 for orientations defined in

Yes, for Color Gradient ides you can use the website: or you can use the android app: Material Color.

:arrow_forward: Video Tutorial

:arrow_down: Download the AIA file for the above design: Gradient-UI-Design-1.aia

:arrow_right: How to Use HEX Color Codes with KIO4 Gradient?

I have found two easy methods to use HEX Color Codes with the Gradient Extension. So, we can design with whatever colors in our mind. Check the video tutorial below for a better understanding:


It’s awesome :metal:
However some type and shape properties aren’t working :confused:


Yeah, that’s true @OfficialDjJohn , I have discussed about that in the video. But still we can create awesome designs from what’s available. :wink:

1 Like

Yes… It’s awesome…
Thanks for such great extension …
Keep up the good work :metal:


can we use colour codes without using basic colour

I have updated the OP with a video tutorial to use HEX Codes with the Gradient Extension. Please check that out.

1 Like

Thanks For It :wink:

my screen is still white when I use this components. why?


you can’t do it on a screen, do an arrangement

In 2016, I think I was the first one (at least who published it) to make a procedure to generate gradients in a canvas without any extension. It was a bit slow for big rectangles, but it worked really fine.!searchin/mitappinventortest/gradients|sort:date/mitappinventortest/LUhZk0SE8TY/VExbXd6rAQAJ

Then one day in 2017, Juan Villalpando, the author of this extension published it in Thunkable for the first time and I used it a lot since then:


Great work. Can we use this extention directly to change screen background too? Or is it applicable only for horizantal/vertical arrangements?

You can try that yourself. Also what would be the difference? If you can’t use it in the screen background, just place an arrangement with both dimensions to FILL PARENT and that’s it.


Thanks mate

Is that possible to work on card view as well?

Take a card view
set the all padding to “0”
put an arrangement inside the card view, set its background color to none,
then you can show gradient color in arrangement and looks like its in card view


Thank you so much!


Welcome :grinning:

Yes, It looks a lot like my 2017 extension in!searchin/mitappinventortest/gradient|sort:date/mitappinventortest/ajZL8lvbWF0/_wyeoaeBCwAJ

Wait so this extension belongs to you?

I built that extension in 2017.