How to Use Linear Gradient in Figma: Step-by-Step Guide

In Figma, to use a linear gradient, select a shape or layer, open the Fill section in the right panel, click the color box, and choose Linear from the gradient options. Then adjust the gradient stops and angle to create the desired color transition.

Syntax

In Figma, a linear gradient is defined by selecting a shape's fill and setting it to a linear gradient type. You then specify multiple color stops and their positions along a line, plus the angle of the gradient.

• Fill: The color or gradient applied to a shape.
• Linear Gradient: A smooth transition between colors along a straight line.
• Color Stops: Points where colors change in the gradient.
• Angle: Direction of the gradient line (0° is left to right).

text

Fill: Linear Gradient
Color Stops: Multiple colors with positions (0% to 100%)
Angle: 0° to 360°

Example

This example shows how to apply a linear gradient from blue to pink on a rectangle in Figma.

text

1. Draw a rectangle on the canvas.
2. Select the rectangle.
3. In the right panel, find the Fill section and click the color box.
4. Change the fill type from Solid to Linear.
5. Click the gradient bar to add two color stops.
6. Set the first stop color to blue (#0000FF) and the second stop to pink (#FF69B4).
7. Adjust the angle to 90° for a vertical gradient.

Output

A rectangle filled with a smooth vertical gradient transitioning from blue at the top to pink at the bottom.

Common Pitfalls

Common mistakes when using linear gradients in Figma include:

• Not switching the fill type to Linear and expecting gradient options.
• Adding too many color stops which can make the gradient look messy.
• Forgetting to adjust the angle, resulting in unexpected gradient direction.
• Overlapping gradients on multiple fills causing confusion.

text

Wrong:
Fill: Solid color #0000FF

Right:
Fill: Linear Gradient with stops #0000FF and #FF69B4

Quick Reference

Action	Description
Select Shape	Choose the object to apply gradient
Open Fill	Click the fill color box in the right panel
Choose Linear	Select 'Linear' from the fill type dropdown
Add Color Stops	Click gradient bar to add or move stops
Set Colors	Pick colors for each stop
Adjust Angle	Drag gradient line or enter angle value

Key Takeaways

Select your shape and change its fill type to linear gradient in the Fill panel.

Add and adjust color stops to control the gradient colors and smoothness.

Set the gradient angle to control the direction of the color transition.

Avoid too many stops and overlapping fills to keep gradients clean.

Use the gradient bar and angle controls for precise customization.