Linear Gradients in Figma

Linear Gradients in Figma are a visual effect in which two or more colors gradually transition from one point to another along a straight line. Instead of displaying one uniform color, a linear gradient creates a smooth color transition that can be used for backgrounds, buttons, cards, illustrations, overlays, hero sections, and other UI elements.

Linear gradients are an important part of modern UI design because they can add depth, visual interest, emphasis, and hierarchy without requiring images or complex graphics. You can learn practical UI/UX design, color systems, gradients, components, responsive design, and prototyping through JustAcademy Figma Training.

A linear gradient can be created directly from the Fill section in Figma by selecting an object, changing its fill type to Linear, choosing colors, and adjusting the gradient direction and position.

1. What Is a Linear Gradient?

A linear gradient is a smooth transition between two or more colors along a straight direction. The transition can move horizontally, vertically, diagonally, or at another angle.

For example, a gradient may transition from blue to purple:

Blue ────────────────→ Purple

#2563EB                 #7C3AED

Unlike a solid color, which remains the same across the entire object, a linear gradient changes gradually from one color stop to another.

2. Why Are Linear Gradients Important?

• Create visually attractive interfaces.
• Add depth and dimension to flat UI elements.
• Highlight important sections.
• Create modern hero sections and backgrounds.
• Improve visual hierarchy.
• Make buttons and cards more visually engaging.
• Create overlays on images.
• Support brand color combinations.
• Improve the visual appearance of illustrations.
• Create polished landing pages and mobile app screens.

3. Where Is the Linear Gradient Property Located in Figma?

The Linear Gradient option is available inside the Fill section of the Design panel.

1. Select a frame, shape, button, card, or other design object.
2. Open the Design panel.
3. Locate the Fill section.
4. Click the color swatch.
5. Change the fill type from Solid to Linear.
6. Adjust the gradient handles directly on the canvas.

Select Object

      ↓
Design Panel
      ↓
Fill
      ↓
Change Solid → Linear
      ↓
Choose Colors
      ↓
Adjust Gradient Direction
      ↓
Adjust Opacity and Position

4. Creating a Linear Gradient

To create a basic linear gradient in Figma, first create or select an object.

1. Create a rectangle using the Rectangle tool.
2. Select the rectangle.
3. Go to the Fill section.
4. Click the color swatch.
5. Select Linear Gradient.
6. Choose the first color.
7. Choose the second color.
8. Drag the gradient line to control its direction.
9. Move the color stops to control the transition.

5. Basic Linear Gradient Example

Suppose you want to create a blue-to-purple gradient.

Start

#2563EB
   ↓
   ↓
   ↓
#7C3AED
End

6. Understanding Gradient Handles

When a linear gradient is applied, Figma displays a gradient line with handles on the canvas. These handles control where the gradient starts and ends.

• First handle controls the starting point.
• Second handle controls the ending point.
• The line between the handles represents the gradient direction.
• Moving a handle changes the gradient position.
• Rotating the line changes the gradient angle.

7. Understanding Gradient Direction

Direction determines how the colors flow across an object. The same colors can produce completely different visual results depending on their direction.

8. Horizontal Linear Gradient

A horizontal linear gradient moves from left to right or right to left.

Left                         Right

Blue ───────────────────────→ Purple

Horizontal gradients are commonly used for buttons, navigation elements, banners, and decorative UI sections.

9. Vertical Linear Gradient

A vertical gradient moves from top to bottom or bottom to top.

Top

Blue
 ↓
 ↓
 ↓
Purple
Bottom

Vertical gradients work well for hero backgrounds, cards, mobile screens, and image overlays.

10. Diagonal Linear Gradient

A diagonal gradient moves between colors at an angle rather than directly horizontally or vertically.

Blue

  \
   \
    \
     → Purple

Diagonal gradients are frequently used in modern landing pages because they can create a stronger sense of movement and visual energy.

11. Linear Gradient Color Stops

A color stop determines the color and location at a particular point in the gradient. A simple gradient normally contains at least two color stops.

Adding a middle color stop can create a richer and more controlled transition.

12. Two-Color Linear Gradient

The simplest gradient uses two colors.

Color 1 → Color 2

Example:

#2563EB → #7C3AED

This type of gradient is easy to maintain and is usually a good choice for buttons, cards, banners, and simple backgrounds.

13. Three-Color Linear Gradient

A three-color gradient contains a start color, middle color, and end color.

#2563EB → #4F46E5 → #7C3AED

Three-color gradients can create more complex visual transitions, but they should be used carefully to avoid visual clutter.

14. Linear Gradient vs Solid Color

15. Linear Gradient vs Radial Gradient

16. Linear Gradients for Buttons

Gradients can be used to make primary buttons visually prominent.

Button Gradient:

#2563EB → #7C3AED

Example button design:

• Background: Blue-to-purple linear gradient.
• Text: White.
• Border radius: 8px.
• Padding: 12px 24px.
• Font weight: 600.

17. Button Gradient States

Interactive buttons may require different visual states.

The exact colors should be defined according to the design system rather than changing randomly between states.

18. Linear Gradients for Hero Sections

Hero sections are large introductory areas of websites. Linear gradients can create a strong visual background behind headings, descriptions, images, and calls to action.

Hero Section

┌────────────────────────────────────┐
│ Blue ───────────────→ Purple       │
│                                    │
│        Build Better Products       │
│        with Modern Design          │
│                                    │
│          [ Get Started ]           │
└────────────────────────────────────┘

19. Linear Gradients for Backgrounds

Gradients can be applied to complete frames or sections to create visual separation.

For example, a landing page may use a light blue-to-white gradient for its hero background.

Top:    #DBEAFE

         ↓
         ↓
Bottom: #FFFFFF

20. Linear Gradients for Cards

Cards can use gradients as backgrounds, headers, badges, or decorative areas.

A product card could use a subtle gradient behind a product image while keeping the information section mostly solid.

┌─────────────────────────┐

│ Blue → Purple Gradient  │
│                         │
│      Product Image      │
│                         │
├─────────────────────────┤
│ Product Name            │
│ ₹1,999                  │
│ [ Buy Now ]             │
└─────────────────────────┘

21. Linear Gradients for Navigation

Gradients can be used in navigation elements when the design requires strong branding or visual emphasis.

• Active navigation item.
• Navigation background.
• Mobile menu header.
• Special promotional navigation item.

However, navigation should remain readable and should not use excessive gradients.

22. Linear Gradients for Text

Gradient text can create a modern visual effect where letters transition between multiple colors.

In Figma, the gradient can be applied to a text layer through its fill property.

Design Text

"Create Better Experiences"
 
Fill:
Blue → Purple

Gradient text should generally be reserved for headings, branding, or decorative text rather than long paragraphs.

23. Linear Gradients for Icons

Gradients can be applied to icons to make them more visually expressive.

• App icons.
• Feature icons.
• Social icons.
• Illustration elements.
• Dashboard icons.

For functional icons, readability should remain more important than decoration.

24. Linear Gradients for Illustrations

Linear gradients are useful for creating depth in illustrations. Multiple gradient layers can simulate lighting, highlights, and dimensional surfaces.

Illustration

   ↓
Base Shape
   ↓
Linear Gradient
   ↓
Highlight
   ↓
Shadow
   ↓
Final Illustration

25. Linear Gradients and Visual Hierarchy

Visual hierarchy determines which elements attract attention first. A strong gradient can make an element visually dominant.

For example, a bright gradient button placed on a neutral background can immediately attract attention.

• Primary actions can use stronger gradients.
• Secondary actions can use solid or subtle colors.
• Background gradients should remain less prominent than important content.

26. Linear Gradients and Contrast

Contrast is especially important when text is placed over a gradient. Because the background color changes across the object, text may be readable in one area and difficult to read in another.

Always inspect the entire gradient behind the text and ensure sufficient contrast throughout the content area.

27. Linear Gradients and Accessibility

Gradients should not reduce accessibility or readability.

• Maintain sufficient text contrast.
• Avoid extremely bright transitions behind small text.
• Do not communicate important information using color alone.
• Use labels, icons, or patterns when necessary.
• Test important UI states against accessibility requirements.

28. Linear Gradients and Brand Identity

Gradients can become part of a brand's visual language when they are created from approved brand colors.

For example:

These colors can be combined into consistent gradients for branded sections.

29. Creating a Brand Gradient

A brand gradient should be defined intentionally rather than created randomly.

Brand Primary

#2563EB
     ↓
Brand Secondary
#7C3AED
     ↓
Brand Gradient
#2563EB → #7C3AED

The gradient can then be reused across hero sections, buttons, promotional cards, and illustrations.

30. Linear Gradients and Opacity

Opacity controls the transparency of gradient colors. Lower opacity allows underlying content or backgrounds to become visible through the gradient.

31. Gradient Stop Opacity

Individual gradient stops can have different opacity values. This makes it possible to create fade effects.

Color Stop 1

Blue / 100%
      ↓
Blue / 60%
      ↓
Blue / 20%
      ↓
Transparent / 0%

This technique is useful for overlays and image readability.

32. Linear Gradient Image Overlay

A linear gradient can be placed over an image to improve text readability.

Image

  +
Dark Gradient
  ↓
Readable Text
 
Image ────────────────
       ↓
Dark → Transparent
       ↓
Text Area

For example, a dark gradient can start at the bottom of an image and gradually become transparent toward the top.

33. Linear Gradient Overlay Example

Suppose a travel card contains a mountain image and white text at the bottom.

┌──────────────────────────┐

│       Mountain Image     │
│                          │
│                          │
│       Dark Gradient      │
│  ─────────────────────   │
│  Himalaya Adventure      │
│  Explore Now             │
└──────────────────────────┘

The gradient creates a dark area behind the text without permanently darkening the entire image.

34. Linear Gradients in Login Screens

A login page can use a subtle gradient in its background or branding section.

┌───────────────────────────────────┐

│ Blue → Purple Gradient            │
│                                   │
│          Welcome Back             │
│                                   │
│       Email                       │
│       [________________]          │
│                                   │
│       Password                    │
│       [________________]          │
│                                   │
│       [ Login ]                   │
└───────────────────────────────────┘

The form itself should remain readable and usable even when the background uses a strong gradient.

35. Linear Gradients in Mobile App Design

Linear gradients are widely useful in mobile interfaces because small screens benefit from strong but controlled visual hierarchy.

• Onboarding screens.
• Splash screens.
• Primary buttons.
• Profile headers.
• Promotional cards.
• Subscription screens.
• Dashboard headers.

36. Linear Gradients in Web Design

Websites can use gradients for hero banners, call-to-action areas, pricing cards, promotional sections, navigation, and decorative backgrounds.

Example structure:

Website

├── Header
├── Hero
│   └── Linear Gradient
├── Features
├── Pricing
│   └── Gradient CTA
├── Testimonials
└── Footer

37. Linear Gradients with Components

Gradients can be included inside reusable Figma components. This makes it possible to maintain a consistent appearance across repeated UI elements.

• Create the gradient once.
• Place it inside the component.
• Create variants when different states require different gradients.
• Reuse the component across screens.

38. Linear Gradients with Variants

Variants can represent different gradient states or styles.

This approach is useful for buttons, cards, tabs, badges, and interactive components.

39. Linear Gradients with Auto Layout

Auto Layout controls spacing and positioning between elements, while gradients control visual appearance. These features can be used together.

Auto Layout Frame

      ↓
Gradient Background
      ↓
Text + Icon + Button
      ↓
Responsive Component

When the component changes size, the gradient remains attached to the component background.

40. Linear Gradients in Responsive Design

Responsive designs may display the same gradient on desktop, tablet, and mobile screens.

However, the gradient direction may need adjustment depending on the composition.

41. Linear Gradients for Dashboard UI

Dashboard cards can use gradients to highlight important metrics.

┌────────────────────────────┐

│ Revenue                    │
│                            │
│ ₹8,45,000                  │
│                            │
│ +18.5%                     │
│                            │
│ Blue → Purple Gradient     │
└────────────────────────────┘

Gradients should be used selectively so that all dashboard cards do not compete for attention.

42. Practical Example: Gradient Button

Create a reusable primary button with a blue-to-purple linear gradient.

1. Create a rounded rectangle.
2. Set width and height according to the design system.
3. Apply a Linear Gradient fill.
4. Set the first color to #2563EB.
5. Set the second color to #7C3AED.
6. Adjust the gradient horizontally or diagonally.
7. Add white button text.
8. Apply suitable corner radius.
9. Convert the button into a component.

Button

┌─────────────────────────────┐
│       Get Started           │
│ Blue ─────────────→ Purple  │
└─────────────────────────────┘

43. Practical Example: Product Card

Create a product card with a gradient header.

1. Create a card frame.
2. Add a header area.
3. Apply a subtle linear gradient.
4. Add product image.
5. Add product name and price.
6. Add a solid or gradient CTA button.
7. Use Auto Layout for content spacing.

44. Practical Example: Landing Page Hero

Create a modern landing page hero using a diagonal gradient.

┌────────────────────────────────────────┐

│ Blue                                    │
│   \                                    │
│    \       Build Your Product          │
│     \      Faster                      │
│      \                                 │
│       Purple                           │
│                  [ Start Now ]         │
└────────────────────────────────────────┘

Keep the text area sufficiently contrasted against the gradient background.

45. Practical Example: Mobile Onboarding Screen

A mobile onboarding screen can use a full-screen linear gradient behind an illustration and heading.

┌──────────────────────┐

│ Blue                 │
│       Illustration   │
│                      │
│   Welcome to App     │
│                      │
│   Discover Features  │
│                      │
│   [ Continue ]       │
│                      │
│ Purple               │
└──────────────────────┘

46. Common Linear Gradient Mistakes

• Using too many colors.
• Using colors with insufficient contrast.
• Using gradients on every element.
• Making gradients excessively bright.
• Using random color combinations.
• Ignoring text readability.
• Using inconsistent gradient directions.
• Creating unnecessary visual noise.
• Using gradients where a solid color would be clearer.
• Failing to define reusable gradient styles.

47. How to Fix Poor Gradient Usage

48. Linear Gradient Best Practices

• Use gradients intentionally.
• Start with two colors before adding more.
• Use colors from the design system.
• Maintain sufficient contrast.
• Keep gradient directions consistent.
• Use subtle gradients for large backgrounds.
• Use stronger gradients for primary visual elements.
• Test gradients on different screen sizes.
• Reuse approved gradient styles.
• Consider accessibility before finalizing the design.

49. Linear Gradients in a Design System

A design system can define reusable gradient tokens instead of creating new gradients for every screen.

50. Linear Gradient Naming Convention

Good naming makes gradients easier to find and reuse.

Gradient/Primary

Gradient/Secondary
Gradient/Accent
Gradient/Soft
Gradient/Dark
Gradient/Hero
Gradient/Button/Primary
Gradient/Button/Hover

Use meaningful names based on purpose rather than names such as Gradient 1, Gradient 2, and Gradient 3.

51. Linear Gradient Workflow in Figma

Create Object

     ↓
Select Object
     ↓
Open Fill
     ↓
Choose Linear
     ↓
Add Color Stops
     ↓
Set HEX/RGB Values
     ↓
Adjust Gradient Direction
     ↓
Adjust Stop Positions
     ↓
Adjust Opacity
     ↓
Check Contrast
     ↓
Create Style/Variable
     ↓
Reuse Across Components

52. Linear Gradient vs Color Style vs Variable

53. Linear Gradients and Developer Handoff

Developers need accurate gradient information when converting a Figma design into a website or application. A designer should use consistent gradient colors, directions, and stops.

For example, a CSS linear gradient can represent a Figma gradient:

background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%);

The design should communicate the direction, colors, and approximate stop positions clearly.

54. Linear Gradients in CSS

Figma linear gradients can be translated into CSS using the linear-gradient() function.

.gradient-button {

  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 12px 24px;
}

Another example with a diagonal direction:

.hero {

  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
}

55. Linear Gradient Project: Design System

Create a small Figma gradient design system containing reusable gradients.

Gradient Tokens

• Primary Gradient
• Secondary Gradient
• Accent Gradient
• Soft Background Gradient
• Dark Background Gradient
• Hero Gradient
• CTA Gradient

Components

• Gradient Button
• Gradient Card
• Gradient Badge
• Gradient Hero
• Gradient Navigation Item

56. Practical Mini Project: Gradient Landing Page

Create a landing page that demonstrates different linear gradient techniques.

1. Create a desktop frame.
2. Create a hero section.
3. Apply a blue-to-purple gradient.
4. Add heading and supporting text.
5. Create a gradient CTA button.
6. Create feature cards with subtle gradients.
7. Add an image overlay using a dark-to-transparent gradient.
8. Create responsive mobile frames.
9. Convert repeated elements into components.
10. Create reusable gradient styles or variables.

Landing Page

├── Header
├── Hero
│   ├── Gradient Background
│   ├── Heading
│   ├── Description
│   └── Gradient CTA
├── Features
│   ├── Card 1
│   ├── Card 2
│   └── Card 3
├── Image Section
│   └── Gradient Overlay
└── Footer

57. Common Interview Questions

Q1. What is a linear gradient in Figma?

A linear gradient is a color transition between two or more colors along a straight line.

Q2. Where can you create a linear gradient in Figma?

You can create it through the Fill property of a selected object by changing the fill type to Linear Gradient.

Q3. What is a gradient stop?

A gradient stop defines a specific color and position within the gradient.

Q4. Can a linear gradient contain more than two colors?

Yes. Additional color stops can be added to create three-color or multi-color gradients.

Q5. What is the difference between a solid color and a linear gradient?

A solid color remains uniform across an object, while a linear gradient transitions between colors along a direction.

Q6. What is the difference between linear and radial gradients?

A linear gradient follows a straight direction, while a radial gradient expands outward from a central point.

Q7. Where are linear gradients commonly used?

They are commonly used in hero sections, buttons, cards, backgrounds, image overlays, illustrations, and promotional UI.

Q8. Why should gradients be used carefully?

Excessive or poorly chosen gradients can reduce readability, create visual noise, and weaken the interface hierarchy.

Q9. Can gradients be converted into CSS?

Yes. A Figma linear gradient can generally be represented using CSS linear-gradient().

Q10. How can gradient consistency be maintained?

Use a design system with approved colors, gradient tokens, reusable styles, variables, and component-based UI.

58. Practical Checklist for Linear Gradients

• Define the purpose of the gradient.
• Select appropriate brand colors.
• Use two colors initially.
• Choose the correct direction.
• Adjust gradient handles.
• Position color stops carefully.
• Check opacity values.
• Check text contrast.
• Test the gradient on different backgrounds.
• Check desktop and mobile layouts.
• Create reusable gradient styles when appropriate.
• Use consistent naming.
• Test interactive states.
• Prepare accurate developer handoff information.

59. Quick Revision

60. Key Takeaways

• Linear gradients create smooth color transitions along a straight direction.
• They can be horizontal, vertical, diagonal, or custom angled.
• Figma provides gradient handles for controlling direction and position.
• Color stops determine the colors and transition points.
• Gradients are useful for buttons, backgrounds, cards, hero sections, and overlays.
• Gradient text and illustrations can create modern visual effects.
• Gradients should support visual hierarchy rather than create unnecessary decoration.
• Accessibility and contrast should always be considered.
• Reusable gradient styles and variables help maintain design consistency.
• Figma gradients can be translated into CSS using linear-gradient().

61. Conclusion

Linear Gradients in Figma are a powerful visual design technique for creating smooth transitions between colors. They can add depth, emphasis, branding, and visual interest to websites, mobile applications, dashboards, landing pages, cards, buttons, illustrations, and other interface elements.

A professional designer should not use gradients simply for decoration. The gradient should have a clear purpose, use appropriate colors, maintain readability, support the visual hierarchy, and remain consistent with the overall design system. By combining gradients with components, variants, Auto Layout, responsive design, styles, and variables, designers can create scalable and professional UI systems.

For structured practical learning in UI/UX design, Figma tools, components, design systems, responsive design, prototyping, and real-world projects, explore JustAcademy Figma Training.

To explore the course and attend a practical introduction or demo session, visit Register for Figma Course Demo.