Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Color Gradients

As we learn to use color in different ways, there will come time to create gradient colors to spruce up your design and achieve a certain look and feel.

In this lesson, we will talk about how to create several types of gradients using design programs as well as a few best practices with gradient colors.

The most straightforward form of gradients is linear gradient. You can combine 2 or more colors together in a linear direction. You can change the direction of the gradient to any degrees that is necessary to achieve the stylistic effect you are looking to create. You may also extend the length of the gradient color handle to make your gradient look more subtle or more concentrated.

The next form of gradient is radial gradient. Instead of having color gradation in a linear fashion, it goes in circles. Radial gradient is particularly useful in Photoshop or Lightroom retouching when designers want to highlight part of the photo for various retouching functions. It also works great for illustrators that need radial gradient for specific shading effect in their illustrations. It is definitely less used in user interface design.

There are other forms of gradients that are used even less, but can be really fun for artistic effects. Different design programs may have different names for them and some are only available in certain design programs. For example, in Figma, there is angular gradient, which creates gradient in a clock-like manner. Another gradient that is available in Figma is called Diamond gradient, which creates a diamond shaped gradient from the center of the shape.

In Adobe Illustrator, there is Freeform gradient, which is an excellent tool for designers to create extremely nuanced and custom gradient art. You can think of it as a mixing palette with as many colors as you need inside. You are free to control the hues, the directions and number of colors involved. Designers often use freeform gradient for artistic effects that they envision for their design. Illustrators can use freeform gradient to enhance the details of their illustration.

Going back to the basics, there are three best practices of gradients we want to share with you.

The first one is subtlety and harmony. Gradients are best done with colors that are similar to each other, especially if you are a beginner and not yet a master of color harmony. Once you master color harmony and develop your “eyes for design”, you may experiment with mixing colors that belong to classic color harmony that we covered in a previous lesson.

Another principle to remember is that gradient is a design style – once you decide to use gradient, you will need to use it again in similar design elements to establish that style. It is not recommended to use it haphazardly without a plan.

We do not recommend several types of gradients in general. Gradients that go from either black or gray to white tend to look outdated because they resembled washed-out or faded objects. We also do not recommend gradients that consist of polarizing colors, which may create too much of a contrast and therefore making the blend difficult.

The last best practice we recommend is to construct a 100% black gradient to 0% black gradient as an overlay on top of photos if you want to overlay text. This type of gradient produces a natural, subtle and effective vignette to separate text and photo while still revealing the part of the photo that is important. You can elongate and reposition the handle of the gradient in a way that suits the text placement the most. On the other hand, semi-transparent solid dark overlay can cloud a photo too much. That’s why this type of linear gradient is a better choice as a dark overlay solution.

Scroll to Top