Linear gradient in Figma - Deep Dive

Overview - Linear gradient

What is it?

A linear gradient is a smooth transition between two or more colors along a straight line. It is used in design tools like Figma to create backgrounds, buttons, and visual effects that blend colors seamlessly. The gradient direction and color stops can be adjusted to control how colors change across the shape. This helps make designs more visually appealing and dynamic.

Why it matters

Linear gradients add depth and interest to flat designs, making them look modern and professional. Without gradients, designs can appear dull and lifeless, lacking visual cues that guide the viewer's eye. They solve the problem of creating smooth color transitions without manually blending colors, saving time and improving consistency. This enhances user experience and engagement in digital products.

Where it fits

Before learning linear gradients, you should understand basic color theory and how to use shapes and fills in Figma. After mastering linear gradients, you can explore more complex gradients like radial and angular gradients, as well as advanced effects like blending modes and opacity stops.

Mental Model

Core Idea

A linear gradient is like painting a smooth color fade along a straight line from one color to another.

Think of it like...

Imagine a sunrise where the sky changes color gradually from dark blue at the top to orange near the horizon. The colors blend smoothly along a straight line, just like a linear gradient in design.

Start Color ──────────────> End Color
│
│  Color stops define points along the line where colors change
│
Direction controls the angle of the gradient line

Example:
[Blue]───[Light Blue]───[White]
  ← Gradient direction →

Build-Up - 6 Steps

1

Foundation

Understanding color fills in Figma

Concept: Learn how to apply solid colors as fills to shapes in Figma.

In Figma, select a shape and look at the Fill section in the right panel. Click the color box to pick a solid color. This color fills the entire shape uniformly without any transition.

Result

The shape changes to a single solid color fill.

Knowing how to apply solid fills is the base for understanding how gradients modify fills with color transitions.

2

Foundation

Introducing linear gradients as fills

Concept: Replace solid fills with linear gradients to create smooth color transitions.

Select a shape, go to the Fill section, click the color box, and change the fill type from 'Solid' to 'Linear Gradient'. You will see a gradient bar with color stops you can adjust.

Result

The shape now shows a smooth blend between two or more colors along a straight line.

This step shows how fills can be dynamic and visually richer than solid colors by blending multiple colors.

3

Intermediate

Adjusting gradient direction and angle

🤔Before reading on: do you think changing the gradient angle rotates the color transition line or changes the colors themselves? Commit to your answer.

Concept: Learn how to control the angle and direction of the linear gradient line.

In the gradient editor, drag the gradient handles or enter an angle value to rotate the gradient line. This changes the direction the colors blend across the shape, for example from left-to-right or top-to-bottom.

Result

The color transition shifts direction, changing how the gradient looks on the shape.

Understanding gradient direction helps you control visual flow and emphasis in your design.

4

Intermediate

Using multiple color stops in gradients

🤔Before reading on: do you think adding more color stops creates sharper or smoother transitions? Commit to your answer.

Concept: Add and position multiple color stops to create complex color blends.

Click on the gradient bar to add new color stops. Drag stops left or right to adjust where colors change. Each stop can have a different color and opacity.

Result

The gradient shows multiple color transitions, allowing richer and more detailed color effects.

Multiple stops let you customize gradients beyond simple two-color fades, enabling nuanced designs.

5

Advanced

Controlling opacity in gradient stops

🤔Before reading on: do you think opacity changes affect the entire shape or only parts of the gradient? Commit to your answer.

Concept: Adjust opacity per color stop to create transparency effects within the gradient.

Select a color stop and change its opacity slider. This makes that part of the gradient partially see-through, blending with background or layers behind.

Result

The gradient includes transparent areas, adding depth and layering effects.

Opacity control in gradients allows designers to create subtle overlays and visual hierarchy.

6

Expert

Performance and accessibility considerations

🤔Before reading on: do you think complex gradients always improve user experience? Commit to your answer.

Concept: Understand when and how to use gradients without harming performance or accessibility.

Complex gradients with many stops or opacity changes can slow rendering on low-end devices. Also, gradients with low contrast can reduce readability for users with vision impairments. Use gradients thoughtfully, test on devices, and ensure sufficient contrast.

Result

Designs that balance visual appeal with performance and accessibility.

Knowing the limits of gradients prevents design choices that hurt usability or device performance.

Under the Hood

Figma renders linear gradients by calculating color values for each pixel along a defined line between color stops. It interpolates colors smoothly between stops using linear interpolation. The gradient direction sets the vector along which interpolation happens. Opacity stops modify alpha values per pixel. This calculation happens in real-time as you adjust stops or direction.

Why designed this way?

Linear gradients are designed to be intuitive and flexible, allowing designers to create smooth color blends easily. The linear interpolation method is computationally efficient and visually smooth. Alternatives like radial gradients exist for circular blends, but linear gradients cover most common use cases with simple controls.

┌─────────────────────────────┐
│ Color Stop 1 (Start Color)  │
│          │                  │
│          ▼                  │
│ ──────────────────────────> │ Gradient Direction Line
│          ▲                  │
│ Color Stop 2 (End Color)    │
└─────────────────────────────┘

Pixels along the line get colors interpolated between stops.

Myth Busters - 4 Common Misconceptions

Quick: Does changing the gradient angle change the colors themselves? Commit to yes or no.

Common Belief: Changing the gradient angle changes the colors used in the gradient.

Reality: Changing the angle only changes the direction of the color transition, not the colors themselves.

Why it matters: Misunderstanding this leads to confusion when the colors stay the same but the gradient looks different, causing unnecessary color edits.

Quick: Do more color stops always make gradients smoother? Commit to yes or no.

Common Belief: Adding more color stops always makes the gradient smoother.

Reality: More stops can create sharper transitions or banding if colors are very different or stops are close together.

Why it matters: Assuming more stops equal smoothness can cause unintended harsh color changes and poor visual quality.

Quick: Does opacity in gradient stops affect the whole shape's opacity? Commit to yes or no.

Common Belief: Opacity changes in gradient stops make the entire shape transparent.

Reality: Opacity affects only the gradient area at that stop, blending with background or layers behind, not the whole shape uniformly.

Why it matters: Confusing this can lead to unexpected transparency effects and design errors.

Quick: Are complex gradients always better for user experience? Commit to yes or no.

Common Belief: Using complex gradients with many stops always improves design quality.

Reality: Complex gradients can reduce performance and accessibility if overused or poorly contrasted.

Why it matters: Ignoring this can cause slow loading designs and poor readability for users.

Expert Zone

1

Gradient stops can have the same color but different opacity to create subtle fade effects.

2

The order of color stops affects interpolation; rearranging stops can drastically change the gradient look.

3

Figma allows saving and reusing gradient styles for consistency across projects, a practice often missed by beginners.

When NOT to use

Avoid linear gradients when you need radial or angular color transitions; use radial or angular gradients instead. Also, avoid gradients in UI elements where solid colors improve clarity and accessibility, such as text backgrounds.

Production Patterns

Professionals use linear gradients for button backgrounds, hover states, and subtle shadows. They combine gradients with opacity stops to create layered effects and use shared gradient styles for brand consistency.

Connections

Color Theory

Builds-on

Understanding how colors mix and contrast helps create effective gradients that enhance design harmony and readability.

Data Visualization Color Scales

Same pattern

Linear gradients are similar to color scales in charts, where colors represent data values smoothly transitioning along a range.

Physics of Light Refraction

Analogy in nature

The way light bends and changes color through prisms parallels how gradients blend colors smoothly, linking design to natural phenomena.

Common Pitfalls

#1 Using too many color stops causing harsh color bands.

Wrong approach:

Fill: Linear Gradient with stops at 0%, 10%, 11%, 20%, 21%, 30% all with very different colors.

Correct approach:

Fill: Linear Gradient with well-spaced stops at 0%, 25%, 50%, 75%, 100% with gradual color changes.

Root cause:

Misunderstanding that closely spaced stops with contrasting colors create sharp transitions instead of smooth blends.

#2 Setting gradient opacity stops without considering background layers.

Wrong approach:

Gradient stop opacity set to 0% on a shape with a white background, expecting full transparency.

Correct approach:

Gradient stop opacity set to 0% on a shape placed over a colored or image background to see transparency effect.

Root cause:

Not realizing opacity transparency reveals layers behind, so effect depends on background presence.

#3 Rotating gradient angle but expecting colors to change automatically.

Wrong approach:

Changing gradient angle from 0° to 90° and expecting new colors to appear.

Correct approach:

Manually changing color stops if new colors are desired after adjusting angle.

Root cause:

Confusing gradient direction with color selection.

Key Takeaways

Linear gradients create smooth color transitions along a straight line, controlled by direction and color stops.

Adjusting gradient angle changes the direction of color blending, not the colors themselves.

Multiple color stops allow complex gradients but must be spaced carefully to avoid harsh transitions.

Opacity stops add transparency effects within gradients, blending with backgrounds or layers behind.

Using gradients thoughtfully balances visual appeal with performance and accessibility for better user experience.

Practice

1. What does a linear gradient do in a Figma design?

easy

A. Adds a shadow effect to objects

B. Rotates the object by a certain angle

C. Changes the font style of text

D. Creates a smooth blend of colors in one direction

Solution

1. Step 1: Understand the purpose of linear gradients

   Linear gradients blend two or more colors smoothly along a straight line.

2. Step 2: Identify the effect in Figma

   In Figma, linear gradients create color transitions in one direction, enhancing visual appeal.

3. Final Answer:

   Creates a smooth blend of colors in one direction -> Option D

4. Quick Check:

   Linear gradient = smooth color blend [OK]

Hint: Linear gradient blends colors smoothly in a line [OK]

Common Mistakes:

• Confusing gradient with shadow effects
• Thinking it changes text font
• Assuming it rotates objects

2. Which of the following is the correct way to set a linear gradient angle in Figma?

easy

A. linear-gradient(45deg, #FF0000, #0000FF)

B. linear-gradient(45, #FF0000, #0000FF)

C. linear-gradient(45rad, #FF0000, #0000FF)

D. linear-gradient(45%, #FF0000, #0000FF)

Solution

1. Step 1: Recognize the angle unit for linear gradients

   Figma uses degrees (deg) to specify the angle of a linear gradient.

2. Step 2: Check each option's syntax

   linear-gradient(45deg, #FF0000, #0000FF) uses '45deg' which is correct; others use invalid units like '45', '45rad', or '45%'.

3. Final Answer:

   linear-gradient(45deg, #FF0000, #0000FF) -> Option A

4. Quick Check:

   Angle unit = deg [OK]

Hint: Use 'deg' for angles in linear gradients [OK]

Common Mistakes:

• Omitting 'deg' unit for angle
• Using radians or percentages incorrectly
• Confusing angle with color stop values

3. What will be the visual result of this Figma linear gradient code?
linear-gradient(90deg, #00FF00 0%, #0000FF 100%)

medium

A. A solid green color with no gradient

B. A gradient from blue on the left to green on the right

C. A gradient from green on the left to blue on the right

D. A gradient from green at the top to blue at the bottom

Solution

1. Step 1: Understand the angle 90deg in linear gradients

   90 degrees means the gradient goes horizontally from left (0%) to right (100%).

2. Step 2: Analyze the color stops

   Color starts with green (#00FF00) at 0% (left) and transitions to blue (#0000FF) at 100% (right).

3. Final Answer:

   A gradient from green on the left to blue on the right -> Option C

4. Quick Check:

   90deg = left to right gradient [OK]

Hint: 90deg means left to right gradient [OK]

Common Mistakes:

• Mixing up start and end colors
• Confusing horizontal with vertical gradient
• Ignoring color stop percentages

4. Identify the error in this Figma linear gradient code:
linear-gradient(180, #FF0000, #00FF00)

medium

A. Gradient must have at least three colors

B. Missing 'deg' unit for the angle

C. Gradient direction cannot be 180

D. Colors are not valid hex codes

Solution

1. Step 1: Check the angle syntax

   The angle '180' must include the unit 'deg' to be valid in Figma.

2. Step 2: Verify color codes and gradient rules

   Colors '#FF0000' and '#00FF00' are valid hex codes; 180deg is a valid direction; two colors are allowed.

3. Final Answer:

   Missing 'deg' unit for the angle -> Option B

4. Quick Check:

   Angle unit required = deg [OK]

Hint: Always add 'deg' after angle number [OK]

Common Mistakes:

• Leaving out 'deg' unit
• Thinking colors are invalid
• Assuming gradient needs 3+ colors

5. You want to highlight a sales dashboard header with a linear gradient that fades from transparent to blue horizontally. Which Figma code achieves this best?

hard

A. linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%)

B. linear-gradient(0deg, #0000FF 0%, #FFFFFF 100%)

C. linear-gradient(180deg, #0000FF 0%, transparent 100%)

D. linear-gradient(45deg, #0000FF, #00FFFF)

Solution

1. Step 1: Understand the requirement for horizontal fade from transparent to blue

   The gradient should go left to right (90deg) starting transparent blue to solid blue.

2. Step 2: Analyze each option

   linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%) uses rgba with alpha 0 to 1 horizontally, matching the requirement. Others have wrong directions or colors.

3. Final Answer:

   linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%) -> Option A

4. Quick Check:

   Horizontal transparent to blue = linear-gradient(90deg, rgba(0,0,255,0) 0%, rgba(0,0,255,1) 100%) [OK]

Hint: Use rgba with alpha for transparency in gradients [OK]

Common Mistakes:

• Using wrong angle for horizontal fade
• Using hex colors without transparency
• Reversing color stops order