Linear gradient in Figma - Cell-by-Cell Formula Trace

Concept Flow

Start Color (#FF0000) --> Linear Gradient --> End Color (#0000FF)
Angle: 90 degrees (left to right)

The linear gradient is created by blending the start color to the end color along the specified angle.

Formula

linear-gradient(90deg, #FF0000, #0000FF)

This code defines a linear gradient from red to blue horizontally.

Step-by-Step Trace

Step	Expression	Evaluates To	Explanation
1	Angle = 90 degrees	90 degrees	Defines gradient direction from left to right.
2	Start Color = #FF0000 (red)	#FF0000	Gradient starts with red color.
3	End Color = #0000FF (blue)	#0000FF	Gradient ends with blue color.
4	Combine angle and colors	linear-gradient(90deg, #FF0000, #0000FF)	Creates the horizontal gradient from red to blue.

The final linear gradient smoothly transitions from red on the left to blue on the right at 90 degrees.

Variable Tracker

Variable	Value
Angle	90 degrees
Start Color	#FF0000
End Color	#0000FF

Key Moments

What does the angle 90 degrees specify?

Which color does the gradient start with?

What is the final formula combining all parts?

Sheet Trace Quiz - 3 Questions

What direction does a 90 degree angle represent in a linear gradient?

A Top to bottom

B Left to right

C Diagonal

D Circular

Key Result

A linear gradient blends two colors smoothly along a specified angle, here from red to blue horizontally at 90 degrees.

Transcript

We start with the angle 90 degrees, which means the gradient goes from left to right. The start color is red (#FF0000), and the end color is blue (#0000FF). Combining these, the formula linear-gradient(90deg, #FF0000, #0000FF) creates a smooth horizontal gradient from red to blue.