7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Get 50% off during WWDC 2024!

Courses

Angular Gradient
ADD TO FAVORITES

Step-by-step guide to creating and customizing an angular gradient in

Figma

Angular Gradient is a powerful feature in Figma that allows

you to create stunning gradient effects in your designs. In
this tutorial, we will go over how to create an Angular
Gradient and customize it to fit your design needs.

https://designcode.io/figma-handbook-angular-gradient 1/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Resources
Eggradients: gradient background colors

UI Gradients: the gradients are all free to use

WebGradients: a free collection of 180 linear gradients

Gradient Buttons: hundreds of CSS gradients buttons

CoolHue: gradient colors palette

Grabient: gradient colors palette

Gradient Hunt: a free and open platform for color inspiration with thousands
of trendy hand-made color gradients

Creating an Angular Gradient

To create an Angular Gradient in Figma, first select the object you want to apply
the gradient to. Then, go to the Fill section in the right-hand panel and click on

https://designcode.io/figma-handbook-angular-gradient 2/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

the gradient option. This will open the gradient editor where you can create and
customize your gradient.

In the gradient editor, you will see 7 options at the top: Solid, Linear, Radial,
Angular, Diamond, Image and Video. Select Angular to create an Angular
Gradient.

Next, you can add colors to your gradient by clicking on the color stops on the
gradient bar at the box. You can add as many colors as you like, and you can
drag the color stops to adjust the location of the colors in the gradient.

https://designcode.io/figma-handbook-angular-gradient 3/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Customizing an Angular Gradient

Once you have added colors to your Angular Gradient, you can customize it
further by adjusting the angle, scale, and offset of the gradient.

https://designcode.io/figma-handbook-angular-gradient 4/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

To adjust the angle of the gradient, use the rotation handle at the bottom of
the gradient bar. You can drag this handle to rotate the gradient in any
direction.

https://designcode.io/figma-handbook-angular-gradient 5/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

To adjust the __scale __of the gradient, use the scale handles at the end of the
gradient bar. You can drag these handles to make the gradient larger or
smaller.

To adjust the__ offset __of the gradient, use the offset handle in the middle of
the gradient bar. You can drag this handle to move the gradient left or right.

https://designcode.io/figma-handbook-angular-gradient 6/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Create a background with Angular

Backgrounds are one of the most important elements of a design, and they can
be one of the most difficult to create. Have you ever wanted to create a
background with an angular gradient in Figma? Well, now you can! In this tutorial,
we'll walk through the steps for creating a background with an angular gradient.

LET'S GET STARTED!

Create a new page and add a frame for Desktop. Set the color to #18192B.

Draw an ellipse of 649 by 649 and at position X:532 and Y: 311

Draw a triangle with the pen tool, width 1488 by height 1477 at position X:-19
and Y: -227.

Select Vector 1 and Ellipse 1 then group them(Command + G or Ctrl + G).

https://designcode.io/figma-handbook-angular-gradient 7/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Duplicate Vector 1 and take Vector 2 out of the group.

Select Vector 1 then apply Use as Mask by right-click.

https://designcode.io/figma-handbook-angular-gradient 8/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Duplicate__ Ellipse 2__ and position it at X: 258 and Y: 64.

Duplicate Vector 2 and right-click, choose Flip horizontal then Flip vertical.

Select Vector 2 and Ellipse 2 then group them(Command + G or Ctrl + G).

Select Vector 2 then apply Use as Mask by right-click.

Select Ellipse 1, go to the Fill section in the right-hand panel and click on the
gradient option.

Choose Angular and add the following 4 colors: #561BBE, #561BBE, #C6FBB3
and #87E5FA.

Drag the color stops to adjust the location of the colors in the gradient.

Adjust the angle, scale and offset of the gradient (see picture below).

https://designcode.io/figma-handbook-angular-gradient 9/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Select Ellipse 2 __Then, go to the __Fill section in the right-hand panel and
click on the gradient option.

Choose Angular and add the following 5 colors: #FBF8B3, #FA8792, #B705A5,
#561BBE and #0D0727.

Drag the color stops to adjust the location of the colors in the gradient (see
picture below).

Adjust the angle, scale and offset of the gradient (see picture below).

https://designcode.io/figma-handbook-angular-gradient 10/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

ADD A BACKGROUND ON A FRAME

Note : You can copy and paste the property from the previous exercise to your
frame.

Select Frame, go to the Fill section in the right-hand panel and click on the
gradient option.

Choose Angular and add the following 4 colors: #70E6FB, #FBF8B3, #FA8792
and #561BBE.

Drag the color stops to adjust the location of the colors in the gradient (see
picture below).

Adjust the angle, scale and offset of the gradient (see picture below).

https://designcode.io/figma-handbook-angular-gradient 11/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Draw an Ellipse 3 of 910 by 910 and at position X: 252 and Y: -154.

Move it under the groups and then hide the groups.

Select Ellipse 3, go to the Fill section in the right-hand panel and click on the
gradient option.

Choose Radial and add the following 3 colors: #DC6487, #8627A4, 70%
opacity, #8627A4 and 0% opacity.

Drag the color stops to adjust the location of the colors in the gradient (see
picture below).

Adjust the angle, scale and offset of the gradient (see picture below).

Unhide groups now

https://designcode.io/figma-handbook-angular-gradient 12/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

And that’s it! You have now successfully created a background with an angular
gradient in Figma. Experiment with different colors and effects to create a unique
and eye-catching background.

https://designcode.io/figma-handbook-angular-gradient 13/23
7/28/24, 3:47 PM Angular Gradient - Figma Handbook - Design+Code

Conclusion
Angular Gradient is a powerful feature in Figma that allows you to create beautiful
gradient effects in your designs. In this tutorial, we covered how to create an
Angular Gradient and customize it by adjusting the angle, scale, and offset.
Experiment with these settings to create unique gradient effects in your designs.

https://designcode.io/figma-handbook-angular-gradient 14/23