How to Create a Gradient Background in Figma

Updated on: December 21, 2022

Can a gradient background be created in Figma?

Long story short, yes, you can. This tutorial will show how to do this by simply following these steps.  

Anything is Better with Colors

A nice touch of color can add personality to your application design and make it more visually appealing. Still, we better know how to properly do it and be careful not to overdo the color or end up with a rainbow mess.

A general rule when using gradients is keeping the same range within the color palette. 

How to Create a Gradient Background in Figma

This is plain simple so getting lost isn’t an option. First, select the Rectangle Tool from the toolbar on the left side of the canvas. Draw a rectangle anywhere on the canvas and select the rectangle. In this case we are using a template from which we will take a reference for the gradient design. 

How to Create a Gradient Background in Figma 1

Click the Paint Bucket icon in the right sidebar and choose Linear Gradient. Adjust the gradient by using the controls in the right sidebar or dragging and dropping the color stops on the canvas. 

How to Create a Gradient Background in Figma 2

Once you click the drop-menu, click the Fill tab and select the gradient you just created, and finally adjust the gradient angle using the arrow in the right sidebar. To add more colors to the gradient pattern simply click over the angle and another square will appear.

How to Create a Gradient Background in Figma 3

If you want to apply the same gradient to multiple objects, select them all and click the Paint Bucket icon again. Select the gradient you just created, and it will be applied to all of the selected objects.

As we told you, follow this guideline to create gradient patterns is very easy. Now, is time for you to have fun matching an mixing colors, and making your design more fun and dynamic. Stay tuned with Figma lessons!

Access 2,701+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram