How to create a Color Gradient in Figma.
If you are new to this UI field and looking for how to create a Linear color gradient in Figma for your button or any other design then you are in right place.
Here in this short post, we are going to learn how to make gradient colors for our object let’s say Button so let’s get started.
First thing first, open the blank Figma file and add a simple desktop frame. After that add rectangle of these properties.
Oops… reading this first time? No worries I already made an introduction post for Figma. Just click below to get introduced to Figma.
After this, your design will look this
Now make the corners of our rectangle circular so it will look more attractive. 25 value is enough value for the button. Now add a text field in the button (by pressing T) and add text “Login” so our button will look like this.
Now the important part. Select the button and click on the color under the Fill section. A color selection prompt will appear.
As you can see the default selection is Solid. Change it to Linear. Now two boxes will appear on our button. As you can observe the default color of our button is changed to shades.
Now click on the upper box and set the color to #F6734A and for the bottom rectangle set the color to #FDAC14 and change the visibility to 75% so our design will look like this
If you want to apply gradient Horizontally then simply take the upper box to the left side of the button horizontally and the bottom to the right side of the button. Just like this.
That’s it. Now the bonus tip. If you want to add more gradient for the same button simply click on the line between two gradient boxes and it will add as many boxes as you want to. Here I am adding the third gradient to our button of color #CC6AFA and it will look like this.
Similarly, you can apply this technique to any shape as I did.
That’s it. Now you know how to apply gradient color in Figma. Liked what you just read or learned? Let me know in the comment section. Also, let’s get connected on Linkedin.
Will be back with some cool tricks till then Stay Connected. Stay Happy. Stay Safe. Stay Learning.
