Get 50% off during Black Friday!

Design+Code logo

Quick links

Suggested search

illustration

Gradients

icon

Add to favorites

We'll walk through all the different ways to use gradients in your work, as well as techniques when creating them

icon

Figma Handbook

1

The Figma Design Tool

0:54

2

The Editor in Figma

1:17

3

Basic Tools

2:14

4

Position, Size, Rotation, & Corner Radius properties

1:27

5

Color Styles

1:13

6

Masks

1:47

7

Dark Mode with Selection Colors

1:17

8

Gradients

1:36

9

Creating Backgrounds

2:37

10

Blending Modes

2:02

11

Alignment, Distribution, & Tidy up Properties

1:24

12

Union and Corner Radius

2:53

13

Shadow and Blur Effects

1:48

14

Using Images

2:00

15

Fill, Stroke, & Advanced Stroke

3:21

16

Text Properties and Styles

1:37

17

Google Fonts and Custom Fonts

1:13

18

Accessibility

19

Responsive Design

3:07

20

Constraints

1:11

21

Layout Grid

2:00

22

Auto Layout in Figma

8:17

23

Vector Mode

0:55

24

Vector Network

1:19

25

Perspective Mockups

2:00

26

3D Mockups

1:20

27

Using Illustrations in Design

2:03

28

Booleans

2:24

29

Icon Design

1:48

30

Components

1:50

31

Team Library

2:14

32

Creating Confetti

1:59

33

Looper Shape Duplication

1:41

34

Apple Watch Ring

2:23

35

Exporting Assets in Figma

1:39

36

Exporting CSS Code

1:04

37

Designing with Data

1:57

38

Prototyping

2:25

39

Version History

1:25

40

Multiplayer, Commenting, & Previews

1:36

41

Variants

5:39

42

Interactive Components

5:40

43

UIKits

4:47

44

Plugins

5:47

45

Blob Background

4:45

46

Wave Background

6:46

47

3D Shapes

12:27

48

Parallax Prototyping in Figma

7:52

49

3D UI Perspective Design

7:16

50

Glass Icon

9:16

51

Crystal Ball with Water Effect Animation

12:54

52

Design and code a line animation with letters

29:38

53

Futuristic line animation

19:30

54

Import from Adobe Illustrator to Figma

3:16

55

Create an Illustration in Figma

4:07

56

Remove BG plugin

2:27

57

Circular Lines Advanced Stroke

3:27

58

Publish Design to Community

4:49

59

Turn Image into Vector

3:11

60

Prototype with Scrolling Content

3:42

61

Hug Content and Resizing

2:04

62

Advanced Auto Layout

4:13

63

Circular Text on Path

5:57

64

Mirror Prototype

2:39

65

Sticky Nav and Tab Bar Prototyping

4:37

66

Video in Figma Prototype

5:04

67

Mesh Gradients

3:03

68

Figma Sections

3:53

69

Unsplash Stock Photos

2:07

70

Angular Gradient

4:17

71

Radial Gradient

5:11

72

After Delay Animation Prototyping

3:14

73

UI Wireframe

2:53

74

Lottie Animations

3:55

75

Design Sign Up Screen

6:42

76

Content Generator

2:53

77

Design Lint Missing Style

2:36

78

Slice Tool

2:04

79

Adaptive Layout with Breakpoints

6:25

80

Chart Designs

4:51

81

Design Modals

4:08

82

Batch Rename

2:35

83

Design Onboarding Screen

2:28

84

Animated Button Prototype

3:06

85

Smart Selection

2:15

86

Component Properties

4:37

87

RedLines

2:54

88

Interactive Calendar

7:46

89

Measure Distance

3:33

90

Variable Fonts

2:51

91

AI Plugins

6:16

92

Text Animation

3:11

93

Resize Layers

2:36

94

View Layer Outlines

2:23

95

Prototype Connections

2:38

96

Export SVG Files and Code

2:47

97

3D Illustrations

4:14

98

UI Placeholder

2:38

99

Dark Mode Switch

4:23

100

Dev Mode

6:26

101

Dark Mode Variables

10:04

102

Figma to HTML

10:51

Resources

Gradient Styles

Before applying gradients to our layers, let's first learn about different types of gradients. Every gradient has a starting point from where the colors start before blending into other colors. There are four gradients that we can use in Figma:

  • Linear: This is the most common and widely used gradient out there. In a linear gradient, the colors of the gradient blend from start color to end color in a straight line

Screenshot (923) 1

  • Radial: A radial gradient is the one in which the color has one starting point and then it emanates outwards

radial 1

  • Angle: In this, you can use angles to define the direction of your gradient. Starts counter clockwise and the space between the start and the end points defines the angle

angle 1

  • Diamond: Just like its name, this gradient creates a diamond shape from the starting point

diamond 1

Text Gradient

Just like you would to any shape, you can add gradients to text elements as well. Simply head over to Fill and replace the solid color with one of the gradients according to your preference.

5

Shape Gradient

Every gradient has a starting color point from where the color starts before blending with other colors at some point. Even though we'll be focusing on adding a linear gradient in this tutorial, we've a few other options as well which we've covered above. Feel free to choose an gradient option. You can visit sites mentioned under Resources to use pre-made gradients in your design.

Screenshot (529) 1

Adding Gradient

Learn to creating interesting backgrounds using Gradients.

  • Draw a Circle, click on the color in Fill to open the color palette
  • In the dropdown, instead of Solid, select Linear
  • Using the color-picker, set the 1st gradient color to the accent color
  • Set the 2nd gradient color to #FFFFFF and the opacity to 0%
  • Duplicate the Circle and resize it
  • Set the gradient for it in the same manner we did before. You can choose your preferred colors

Screenshot (528) 1

Angular Gradient

Angular Gradient in Figma is a powerful design tool that helps to create unique and eye-catching visuals. It allows users to create gradients that move in an angular direction across an object. This can be used to create 3D effects, add depth to an object, and add a more dynamic look to a design. Angular Gradient in Figma is a great way to add a modern and stylish look to your designs. It's easy to use and can be a great way to make your designs stand out from the crowd.

Fill-20Gradients-203

Create a Blob with Angular

  • Open Figma and create a new frame.
  • Select the "Eclipse" tool and draw an eclipse in the frame.
  • Select the eclipse, click the color picker, and choose an angular gradient.
  • Add 4 colors, #561BBE, #70E6FB, #FBF8B3 and #FA8792
  • Now you can adjust the angle and direction of the gradient.

Angular-20Gradient-201

  • Add a eclipse by click on Shape Tool then choose eclipse
  • Click and drag in the blob area.
  • Click the color picker in the toolbar.
  • Select the Linear gradient option.
  • In the gradient editor, set the colors of the gradient to #8627A4 and #8627A4.
  • Set the angle of the gradient to 70 degrees.
  • In the Effects panel, click on the Layer Blur, 60.

Angular-20Gradient-202

Stroke Gradient

A stroke gradient is a great way to add a unique touch to your designs in Figma. It’s a great way to make elements look more dynamic, create depth, and add a unique visual style to your designs. Here’s a step-by-step guide on how to create a stroke gradient in Figma.

  • Select the object you want to apply the stroke gradient to
  • Go to the Stroke section of the right-hand panel and click on the Gradient option
  • You’ll be presented with a few options to customize your stroke gradient. You can choose the direction, colors, and width

Fill-20-StrokeGradient-201

  • Once you’ve made your changes, click the Close button.
  • You should now see your stroke gradient applied to the object

Fill-20-StrokeGradient-202

  • Adjust the stroke size and color to your preference. You can also choose to add a rounded or dashed stroke line.
  • If you want to add more definition to the shape, you can add a drop shadow or blur effect.

Stroke-20Gradients

And you’re done! You’ve successfully added a stroke with fill to your design. With the Stroke with Fill feature in Figma, you can easily add texture

Mesh Gradients

Mesh Gradients are a great way to add depth and interest to your design. If you are interested in creating a stunning beautiful design using mesh gradients, this tutorial is definitely what you need!

19

Create Mesh Gradients

To create a mesh gradient without the plugin, we will make circles or blobs and then blur them together in a different color. The colors will then blend together to create the final gradient effect.

  • Create Frame: Create a frame of 353 by 353 and Fill it with the color you want. I’m going to keep the color white.
  • Create Shapes: Use Ellipse and create five circles of 180 by 180 and place them in each square corner and one in the middle.

7

  • Fill Colors: Add a different colour for each shape.

8

  • Edit Shapes: Go to Edit object, and play with the points and the lines to create a blob shape.

Edit

  • Blur Effects: For a smooth effect, add Effects, Layer blur and set the value between 200 and 300 or until you're happy with the effect.

Blur

Mesh Gradient Plugin

The easiest way to create mesh gradients is to use the Mesh Gradients plugin from the Figma community. It's a brilliant tool that allows you to create a gradient image with an underlying 2d mesh and modify the vertices and edges of the mesh to get a perfect gradient.

Plugins for Figma

Plugins

With this plugin, you can easily create stunning, multicolored gradients with just a few clicks. With its intuitive and user-friendly interface, you can customize your gradients with a range of different options like shape, size, color, and opacity. So, whether you're an experienced designer or just starting out, you can easily create beautiful gradients with the Mesh Gradient Plugin. Try it today and see the difference it can make in your work!!

Conclusion

Figma's gradient feature is a great tool for creating attractive and eye-catching visuals. It can be used to create stunning backgrounds, enhance an image, or add a pop of color to an otherwise dull design. With its easy-to-use gradients, you can quickly and easily add some extra flair to your designs. No matter what your style, Figma's gradient feature has something for everyone and is sure to satisfy all of your design needs.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Dark Mode with Selection Colors

READ NEXT

Creating Backgrounds

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads

1

The Figma Design Tool

Getting started with Figma as your design tool

0:54

2

The Editor in Figma

Getting familiar with the Figma interface

1:17

3

Basic Tools

Getting to know the tool panel in Figma

2:14

4

Position, Size, Rotation, & Corner Radius properties

Working with Position, Size, Rotation, & Corner Radius properties

1:27

5

Color Styles

Working with color styles on Figma

1:13

6

Masks

Using masks to clip content and compose your design in Figma

1:47

7

Dark Mode with Selection Colors

Learn to design and adapt for designs for Dark Mode with Selection Colors

1:17

8

Gradients

We'll walk through all the different ways to use gradients in your work, as well as techniques when creating them

1:36

9

Creating Backgrounds

Design backgrounds in Figma

2:37

10

Blending Modes

Learn to interesting techniques with Blending Modes

2:02

11

Alignment, Distribution, & Tidy up Properties

Exploring Alignment and Tidy up in Figma

1:24

12

Union and Corner Radius

Working on union and corner radius

2:53

13

Shadow and Blur Effects

Exploring ways to incorporate shadows and blur to your design

1:48

14

Using Images

Steps on how to use images in Figma

2:00

15

Fill, Stroke, & Advanced Stroke

Get to know more about the Fill and various Stroke options in Figma

3:21

16

Text Properties and Styles

Explore and learn about Figma's type properties

1:37

17

Google Fonts and Custom Fonts

Explore the differences between Google Fonts and custom fonts for your website

1:13

18

Accessibility

Exploring a11y in design

19

Responsive Design

Designing responsive layouts in Figma using Constraints and Auto Layout

3:07

20

Constraints

Working with Constraints in Figma

1:11

21

Layout Grid

Learn to design using grids, columns, rows and margins.

2:00

22

Auto Layout in Figma

Working with Auto Layout for responsive design

8:17

23

Vector Mode

Exploring vector mode to edit and customize vector shapes

0:55

24

Vector Network

Learn to use vector networks and design icons

1:19

25

Perspective Mockups

Use realistic mockups to present your designs

2:00

26

3D Mockups

Adding 3D mockups to design

1:20

27

Using Illustrations in Design

Incorporate illustrations into your design

2:03

28

Booleans

Using booleans to design icons

2:24

29

Icon Design

Learn how to design icons using the tools provided by Figma

1:48

30

Components

Make your design more reusable by using components.

1:50

31

Team Library

Publishing your design styles and components

2:14

32

Creating Confetti

Working with Confetti plugin

1:59

33

Looper Shape Duplication

Working with Looper Figma plugin

1:41

34

Apple Watch Ring

Creating apple watch ring in Figma

2:23

35

Exporting Assets in Figma

Learn about exporting assets in Figma for implementation

1:39

36

Exporting CSS Code

Working with CSS code on Figma

1:04

37

Designing with Data

Plugins to help you design with real content

1:57

38

Prototyping

Quickly create an entire flow for your app design in Figma

2:25

39

Version History

Working with version history on Figma

1:25

40

Multiplayer, Commenting, & Previews

Learn about collaboration & sharing with Figma

1:36

41

Variants

Combining similar components into variants

5:39

42

Interactive Components

Creating reusable interactions using interactive components

5:40

43

UIKits

Designing using UIKits in Figma

4:47

44

Plugins

Exploring and Designing using Plugins in Figma

5:47

45

Blob Background

Create a simple blob background in Figma

4:45

46

Wave Background

Create a wave design in Figma using the Bend tool and the Wave plugin

6:46

47

3D Shapes

Create 3D-looking shapes using vector tools in Figma

12:27

48

Parallax Prototyping in Figma

Learn how to create a parallax scrolling animation technique where the background and the foreground layers move at different speed

7:52

49

3D UI Perspective Design

Transforming your user interface with the power of three-dimensional perspective

7:16

50

Glass Icon

Learn how to design a creative icon using background blur

9:16

51

Crystal Ball with Water Effect Animation

Animate waves in a crystal ball using the prototyping tool

12:54

52

Design and code a line animation with letters

Learn how to animate lines using CSS in CodeSandbox

29:38

53

Futuristic line animation

Learn how to create a futuristic background with lines using the pen tool in Figma

19:30

54

Import from Adobe Illustrator to Figma

Best practices for importing an Illustrator file to Figma

3:16

55

Create an Illustration in Figma

Use the vector tool in Figma to create an illustration from scratch

4:07

56

Remove BG plugin

Remove an image background with the RemoveBG plugin in Figma

2:27

57

Circular Lines Advanced Stroke

Design a camera controller with clock lines in Figma

3:27

58

Publish Design to Community

Publishing design files in the Figma Community

4:49

59

Turn Image into Vector

Convert an image into vector in Figma

3:11

60

Prototype with Scrolling Content

Add vertical and horizontal scrolling on your Figma Prototype

3:42

61

Hug Content and Resizing

Learn how to choose the right resizing options including hug content, fixed width or height, fill container and text truncation

2:04

62

Advanced Auto Layout

Learn how to use spacing mode, canvas stacking, text baseline alignment, stroke values in advanced layout

4:13

63

Circular Text on Path

Make a circular text on path using ARC plugin in Figma

5:57

64

Mirror Prototype

View your prototypes on your mobile device using the Figma mobile app

2:39

65

Sticky Nav and Tab Bar Prototyping

How to fix the position with sticky Nav Bar and Tab Bar

4:37

66

Video in Figma Prototype

Apply a video as a fill using any vector network on your prototype

5:04

67

Mesh Gradients

Create beautiful and wave shaped gradients using shapes or the mesh gradient plugin in Figma

3:03

68

Figma Sections

Use sections in Figma to organize designs better and make it easier for collaboration

3:53

69

Unsplash Stock Photos

Insert beautiful images from Unsplash straight into your designs

2:07

70

Angular Gradient

Step-by-step guide to creating and customizing an angular gradient in Figma

4:17

71

Radial Gradient

Creating vibrant radial gradients in Figma for a professional design look

5:11

72

After Delay Animation Prototyping

The easiest way to animate anything on the web using simple after delay interaction in Figma

3:14

73

UI Wireframe

Use various tools and plugins to create a wireframe that helps you easily plan and design your user interface

2:53

74

Lottie Animations

Step-by-step guide to using Lottie animations in Figma to improve collaboration and enhance your designs

3:55

75

Design Sign Up Screen

Easily design a sign up screen in Figma for your app or website

6:42

76

Content Generator

Useful plugins that can help designers design with real content and save time

2:53

77

Design Lint Missing Style

Save time finding and fixing errors in your Figma designs with Design Lint

2:36

78

Slice Tool

Export your designs using the slice tool in Figma

2:04

79

Adaptive Layout with Breakpoints

Creating flexible and responsive web designs with adaptive layout and breakpoints

6:25

80

Chart Designs

Exploring the endless possibilities of chart designs for data visualization

4:51

81

Design Modals

How to design modals that enhance user interfaces

4:08

82

Batch Rename

Quickly and easily rename multiple files in Figma using the Batch Rename plugin

2:35

83

Design Onboarding Screen

Creating an engaging experience to drive user retention with onboarding design

2:28

84

Animated Button Prototype

How to create a dynamic interactive button

3:06

85

Smart Selection

Arrange layers more efficiently with smart selection

2:15

86

Component Properties

Reduce the number of variants in your design system by using component properties and editing them directly in the properties panel

4:37

87

RedLines

Measure distances and annotate your Figma designs before handoff with Redlines Figma plugin

2:54

88

Interactive Calendar

Learn how to use interactive components in Figma to create an interactive calendar with hover and clicked-on states

7:46

89

Measure Distance

Place your design elements in the right place with measure distance in Figma

3:33

90

Variable Fonts

Learn how to replace static fonts with the variable font version

2:51

91

AI Plugins

Enhancing design efficiency by exploring advanced AI tools in Figma to optimize your workflow

6:16

92

Text Animation

Create an impressive motion text animation using interactive component and after delay

3:11

93

Resize Layers

Resize layers using the scale tool

2:36

94

View Layer Outlines

Understanding and organizing your design with view layer outlines

2:23

95

Prototype Connections

Configure your prototypes so that anyone with view access can see the interactions

2:38

96

Export SVG Files and Code

Exporting your artwork as an SVG file allows you to easily embed it in your HTML and CSS code

2:47

97

3D Illustrations

Enhancing Project Design with 3D Illustrations

4:14

98

UI Placeholder

Insert a temporary element to visualize the design

2:38

99

Dark Mode Switch

Transform your design into dark mode in just one click

4:23

100

Dev Mode

Explore Figma's Dev Mode, your essential tool for simplifying design-to-code workflows

6:26

101

Dark Mode Variables

Learn how Figma's dark mode variable feature enhances design by allowing seamless transitions between themes

10:04

102

Figma to HTML

From Figma to Web: Simplifying HTML Export with Anima

10:51

Meet the instructors

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Akson Phomhome

UI Designer

Designer at Design+Code.

icon

12 courses - 55 hours

course logo

Build a SwiftUI app with Claude AI

This comprehensive SwiftUI course combines cutting-edge AI assistance with hands-on development, guiding you through the process of transforming Figma designs into fully functional iOS applications. Leveraging Claude 3.5 Sonnet, you'll learn to efficiently generate and refine SwiftUI code, create reusable components, and implement advanced features like animations and responsive layouts.

5 hrs

course logo

Prototype and Code iOS apps in Figma and SwiftUI

Welcome to our course on designing a sleek wallet interface with Figma! You’ll learn to create a visually appealing and functional wallet interface using DesignCode and Apple UI Kits. Master prototyping, swipe gestures, carousel animations, overlays, and reusable components. Plus, explore a Figma plugin to easily transition from design to SwiftUI. By the end, you’ll create dynamic, user-friendly prototypes.

3 hrs

course logo

Create 3D UI for iOS and visionOS in Spline

Comprehensive 3D Design Course: From Basics to Advanced Techniques for iOS and visionOS using SwiftUI

3 hrs

course logo

3D UI Interactive Web Design with Spline

Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites

3 hrs

course logo

Design and Prototype for iOS 17 in Figma

Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.

6 hrs

course logo

Design and Prototype Apps with Midjourney

A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools

8 hrs

course logo

Web App Design using Midjourney and Figma

Get UI inspirations from Midjourney and learn UI design, colors, typography as a beginner in Figma

2 hrs

course logo

UI Design for iOS 16 in Sketch

A complete guide to designing for iOS 16 with videos, examples and design files

3 hrs

course logo

UI Design Android Apps in Figma

Design Android application UIs from scratch using various tricks and techniques in Figma

2 hrs

course logo

UI Design Smart Home App in Figma

Design a Smart Home app from scratch using various tricks and techniques in Figma

2 hrs

course logo

UI Design Quick Apps in Figma

Design application UIs from scratch using various tricks and techniques in Figma

12 hrs

course logo

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

6 hrs