This article is a small part of the book named “Designing User Interfaces” written by Michal Malewicz. He is one of the most creative designers that has done an enormous amount of work in designing digital products.

You can get your copy of the book at https://www.designingui.com/

Gradients have been a universal trend during the Web 2.0 time
(early 2000's). Partially because they helped achieve the Skeuomorphism look of 3d, realistic buttons. After a while, however, many designers got bored with them and declared gradients outmoded and a bad-taste design. It all came back to fame after iOS7, and later Modern Design brought gradients back into the spotlight.

Because of their increasing popularity, many designers started calling gradients “the new colors.”

A skeuomorphic button from the first iPhone era had a strong gradient, a thick border, hard shadow, and typical to that style highlight at the top.

Modern gradient, without any extra decoration, can work with a soft shadow made from the same color, creating a beautiful, semi-realistic look.

We like natural things, particularly if they exist in nature. Need evidence? What do you see around you every day? Sky!. The sky is not just one solid color, but a gradient, that depends on weather and lighting.

Most objects we see are three-dimensional, returning light and casting shadows. Because the light is rarely uniform, the resulting colors and shadows are never fully flat or filled with just one color. They are gradient in nature, which makes this particular tonal mix more natural than solid colors.

Look at the everyday objects that surround you. All of them are gradient in nature, and they also change with the change of external light sources.

“Look around. Nearly everything you see is actually a gradient”

When we start choosing our gradients, it’s essential to spot their two main qualities.

One is the ability to create depth and a more defined shape.

The other is about catching the eye and guiding it to certain parts of the shape. Our eyes prefer bright, warm hues, with pretty high saturation.

Even a subtle gradient will make your buttons more friendly and “clickable.”

Depth allows gradient + shadow combinations to appear a bit closer to the eye — which helps in understanding the interactions behind them.

That doesn’t mean we should entirely discard flat design and come back to skeuomorphic buttons of the previous decade. Both methods have their benefits and downsides, so it may be useful to create a healthy mix of the two.

The flat design style allows for a less cluttered, more minimal design that focuses on functionality over form.

Skeuomorphic, or simply a more natural design, reminds us that we’re designing for real people, who prefer things they already know and understand. Realistic gradients can add that “human factor” to an otherwise minimal project and make it more user-friendly.

A gradient is a transition between two or more colors. The colors can also have a transparency value. You can use that to achieve the fade-out effect of an object relative to its background

There are three main types of gradients:

LINEAR

Linear is the most popular gradient type. As its name states, it’s a linear transition of two or more colors. We can modify the colors themselves, their transparency, and the gradient angle.

RADIAL

A radial gradient starts with one color in the middle of the gradient ring, while the other ends up being on its edge. The most common type of this gradient is the circular one, where the transition is distributed evenly along the circle.

Two colors with no transparency can create a 3d look in circles by adding a highlight and shading.

If both ends of the gradient are the same color, with one at full transparency, we end up with a blur or fade-out effect.

A radial gradient works well on non-circular shapes by adding a bit of an organic, realistic style to them.

ANGULAR

An angular gradient goes around in a counter-clockwise circle. The angle between the colors defines whether the transition goes both ways (180-degree angle) or has one sharp dividing line in the middle (at 0-degrees).

This type of gradient is rarely a good choice for interfaces.

Two colors set in the same spot will have a sharp edge between them, while the gradient goes around the other way.

Two colors at 180-degrees will have a fluid transition between the colors going both ways.

You can add more colors and play around with the angle to achieve some interesting results.

Best Practices

How to design a gradient that both looks good, and makes sense for great interface design? There are a few basic rules to follow to accomplish that.

TWO COLORS

Two-color gradients are the best choice for most designs. With more colors, the gradient can become visually busy.

CHOOSING THE RIGHT COLORS

Try to match similar colors, warm hues with warm ones, and cold with cold.

That will help you avoid bad mixes (with the most extreme one being red and green)

SUBTLE GRADIENTS

The best gradients are often very subtle, with not a lot of difference between the colors. It makes them look more natural and easier on the eyes.

Gradients are a popular choice for buttons and other interactive elements. Here are some tips on how to make them shine.

You can pick nearly any color and create a beautiful looking gradient out of it. If you’re starting your gradient journey, however, it’s best to use the safe method that works every time.

STEP ONE

Create a linear gradient and use the same color on both ends. In our case, it’s simply a transition from #E0C3FC to #C3C3FC.

STEP TWO

Check if your color palette is in HSBmode (Hue, Saturation, Brightness) and decrease or increase the Hue value of one of the gradient endings by 15–30. In our case, the color on top has the Hue value reduced by 30.

STEP THREE

For a more organic, friendly effect, you can try rotating the gradient (here it’s at 45 degrees) or decreasing the Saturation by 10–15 points.

I hope you enjoyed it.

here are some useful tools that help you to create your own fantastic gradient.

https://cssgradient.io/gradient-backgrounds/

https://cssgradient.io/

https://webgradients.com/