Playing With Gradients

Saeid Azizi
Aug 16, 2020 · 6 min read
gradient samples with color codes

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.

old-button

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

modern button

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.

sky gradients

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.”

Three types of buttons
Three types of buttons

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.

Linear gradient sample
Linear gradient sample
linear-gradient sample

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)

Choosing the right gradient Colors
Choosing the right gradient Colors

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.

The UX Collective donates US$1 for each article published in our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Saeid Azizi

Written by

Digital Product Designer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Saeid Azizi

Written by

Digital Product Designer

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store