How to Create Gradient in Figma: Step-by-Step Guide

To create a gradient in Figma, select a shape or layer, then open the Fill section in the right sidebar. Click the color box, choose Linear, Radial, or Angular gradient type, and adjust the color stops and direction to customize your gradient.

Syntax

In Figma, gradients are created by setting the Fill property of a shape or layer to a gradient type. You can choose from three gradient types:

• Linear: Colors blend along a straight line.
• Radial: Colors radiate from the center outward in a circle.
• Angular: Colors sweep around a center point like a pie chart.

Each gradient has multiple color stops you can add or move to control the color transition.

json

Fill: {
  type: 'GRADIENT_LINEAR' | 'GRADIENT_RADIAL' | 'GRADIENT_ANGULAR',
  gradientStops: [
    { position: 0, color: '#FF0000' },
    { position: 1, color: '#0000FF' }
  ],
  gradientTransform: [[x1, y1, x2], [x2, y2, y2]]
}

Example

This example shows how to create a linear gradient fill on a rectangle in Figma:

text

1. Draw a rectangle on the canvas.
2. Select the rectangle.
3. In the right sidebar, find the <Fill> section and click the color box.
4. Change the fill type from <Solid> to <Linear Gradient>.
5. Adjust the gradient handles on the rectangle to set direction.
6. Click the color stops to change colors, for example, from red (#FF0000) to blue (#0000FF).

Output

A rectangle filled with a smooth linear gradient from red on the left to blue on the right.

Common Pitfalls

Common mistakes when creating gradients in Figma include:

• Not selecting the shape or layer before applying the gradient fill.
• Forgetting to change the fill type from solid color to gradient.
• Overlapping multiple fills without adjusting opacity, causing unexpected colors.
• Not adjusting gradient handles, resulting in a flat or unclear gradient direction.

Always ensure you have the correct layer selected and the fill type set to your desired gradient.

text

Wrong:
- Selecting a shape and changing color without switching fill type to gradient.

Right:
- Select shape > Fill > Click color box > Choose gradient type > Adjust stops and direction.

Quick Reference

Action	Description
Select shape/layer	Choose the object to apply gradient.
Open Fill section	Find fill settings in right sidebar.
Click color box	Open color picker to change fill.
Choose gradient type	Select Linear, Radial, or Angular.
Adjust color stops	Add, remove, or move colors in gradient.
Move gradient handles	Change gradient direction and spread.

Key Takeaways

Select your shape and open the Fill section to start creating a gradient.

Switch the fill type from solid color to linear, radial, or angular gradient.

Use color stops and gradient handles to customize the gradient look.

Always check that the correct layer is selected before applying gradients.

Avoid overlapping fills without adjusting opacity to prevent color issues.