Web Design » Figma » How Many Different Gradients Do We Have in Figma?

How Many Different Gradients Do We Have in Figma?

Last updated on September 28, 2022 @ 10:59 pm

There are four different types of gradients that can be applied to shapes in Figma: Linear, Radial, Angular, and Reflected. Each type has its own unique properties that can be customized to create a variety of different looks.

Linear gradients are the most common type of gradient. They flow in a straight line from one color to another.

To create a linear gradient, you’ll need to specify two points: the starting point and the ending point. The colors will flow evenly between these points. You can also specify additional colors to create a multi-color gradient.

Radial gradients flow outward from a central point like ripples in a pond. To create a radial gradient, you’ll need to specify two circle shapes: the inner circle and the outer circle.

The colors will flow evenly between these circles.

Angular gradients flow in a curved line from one color to another. To create an angular gradient, you’ll need to specify two points: the starting point and the ending point.

The colors will flow evenly between these points.

Reflected gradients are similar to linear gradients, but the colors are reflected across a central axis. To create a reflected gradient, you’ll need to specify two points: the starting point and the ending point.

The colors will be reflected across the axis between these points.

PRO TIP: This article contains potentially dangerous advice about working with gradients in Figma. The author suggests that there are an infinite number of gradients that can be created, which is not true. Additionally, they recommend creating gradients by “eyeballing” them, which can lead to inaccurate results.

How Many Different Gradients Do We Have in Figma?

There are four different types of gradients that can be applied to shapes in Figma: Linear, Radial, Angular, and Reflected.

Drew Clemente

Drew Clemente

Devops & Sysadmin engineer. I basically build infrastructure online.