Definitions >

Gradient

What is a Gradient?

It’s a bold statement. A way to add depth and dimension to your design. You’ll feel your eyes relax as they gradually transition through the page, flowing from one color to the next…

gradient cover

Flat colors stifle your design’s potential. Gradients, on the other hand, open the door to infinite possibilities. It’s not just about the trendy look you’ll have for a while, it’s more than that.

Color evokes emotional responses. When done well, you’ll experience positive feelings. However, when you create a chaotic cluster of random colors… Well, the emotions you evoke won’t be as pleasant.

gradient cat

Smart gradients can cultivate connection, make an impactful impression, or even move us toward action. In a world where we’re all searching for those experiences, it’s no wonder gradients have become the web design technique that just won’t quit.

Types of Gradients

Before plastering your website with the latest blends, let’s get a lay of the land…

There are several types of gradients. All involve a central starting point where the color starts and progressively blends into other colors. This results in a certain pattern, depending on the type of gradient. The specific area size, shape and gradient style will all affect the finished look.

1. Linear

linear gradient

When you think of the word gradient, this is likely the concept that comes to mind. It’s one of the most common techniques. The color transitions from the starting hue to end in a straight line.

2. Radial

In a radial gradient, the colors fan out from the starting point in a circular pattern.

radial gradient

These gradients are often used in app icons, for example.

social gradients

It creates highlights and shadows, which gives the icons more depth and dimension.

3. Angle

An angle gradient sweeps counterclockwise around the starting point. The line between the start and end points define the angle.

angle gradient

4. Reflected

It’s all in the name. Think of a mirror and you’ll understand how a reflected gradient works. The color is mirrored on both sides of the starting point.

reflected gradient

This is a great technique to use when creating images of glossy items or objects reflected on glossy surfaces.

5. Diamond

As the name suggests this gradient creates a diamond shape from the starting point. The end point is one corner of the diamond.

diamond gradient

How to Use Gradients in Modern Design

We all love this technique when it’s done well, whether we realize it or not. It helps create eye-catching and memorable visual designs.

Designers can use various techniques to add gradients and blend colors to create a unique look to their designs. For example, Spotify’s duotone gradient images are characteristic of the brand and add emotion to playlists.

spotify gradient

Use them as a subtle polish in the background with delicate transitions of monochromatic shades. Enhance images with a soft color overlay or make a bold statement using vibrant colors to highlight design elements.

Here are a few specific strategies for using gradients in modern design:

1. Bring Depth and Dimension

Achieve a natural effect with the highlights and shadows of a gradient. produce highlights and shadows which give a more natural effect. In nature flat colors do not exist, there are always subtle differences in color and transitions from light to dark.

Gradients can add dimension to images, text and other design elements. As a type of light source, it produces subtle transitions and shadows to create a sense of depth.

2. Add Life to Software

A great user experience intuitively directs customers through the software. The right gradient subconsciously leads users toward the focal point and infuses a bit of life into your design.

Subtle gradients can soften geometric designs and create a more natural and realistic look.

If you’re trying to grab attention, bold multi-tone gradients can create interesting high-impact, stand-out designs. They’re also an easy way to add some lighthearted charm.

3. Convey Emotion or Mood

Color evokes emotions, alters moods and ignites reactions. Sometimes we can use this science to connect with the audience on a deeper level.

This means you’ve gotta choose the right colors for your brand. Bright, bold colors stir positive feelings like happiness. On the other hand, deep tones can bring calm while communicating a sense of intelligence and trust.

Tips for Designing Gradients

1. Choose the Right Colors

Do you remember color wheels from grade-school art class? Good, you’re going to need it. Choosing the right tone is more than picking out two random colors. Find complementary shades and experiment with several combinations.

colorwheel gradients
Source: UIGradients

2. Try Out a 3-Stop Gradient Design

Sometimes a gradient with only two color stops causes a dull gray color in the middle of the blend. The simple fix? Add a third color.

three stop gradient

It’s as easy as finding a complementary shade between the two -- one that’s not dull gray.

3. Find Inspiration in Nature

Nature is the ultimate design inspiration. In fact, it’s one of the best places for inspiration when it comes to identifying complementary gradients. Consider the ocean, sky or tropical sunsets…

nature gradient

You can spend hours drawing from the wealth of inspiration beaming in nature.

4. Study the Right Tools

Get familiar with your design tool -- whether you’re using a traditional software like Illustrator or a modern platform like Figma. Ultimately, it’s about your ability, not the tool itself.

Know color combinations. Find your source of inspiration. Learn the tools.

Resources: Webgradients, ColorSpace, Grabient

Examples of Gradients in Modern Design

So now you understand the benefits of gradients and its positive influence in modern designs. Let’s top off this article with a list of examples found around the web to inspire you.

1. Kiwi Rebranding and Website

By: Fabio Pistoia

kiwi gradient

2. iPhone X Mockup

By: Moe Slah

iphone gradient

3. Gradient Studies

By: Evgeniya Righini

purple gradient

4. MAC Cosmetic

By: Vasjen Katro

mac gradient

5. The Mindfulness App

By: Daniel Tan

mindfulness gradient

We enjoyed exploring this topic with you. Want to keep going? Pick one of these related terms to read next:

A. Serif [grey-dee-uh nt], noun:

These do have the pen strokes… Read the full definition »

B. Sans-serif [grey-dee-uh nt], noun:

It’s like serif, sans the serif… Read the full definition »

C. Kerning [skyoo-uh-mawrf-siz-uh m], noun:

Want to dive into the nuances of crisp typography in your designs? It all start here… Read the full definition »