In case you’re open to wide color practicing and do not limit the color palette only to dark shades, there is a strong chance you tried adding a gradient to your design. How did you feel at that moment? Did you like the result or flat colors beat the competition in the end?
Certainly, you won’t find one right answer for all kind of tasks. Moreover, there are lots of ways on how to get benefits from both approaches. That’s why I would like to share my experience of using gradients in this article.
First things first, let’s sing Justin Timberlake song and learn some basic principles:
Apparently, it’s quite an unsteady road to use one gradient on another. While it’s still possible, you can find it’s quite hard to reach the emphasis in this case. Both layers strive to get the main role and, thus, the fight begins.
As for the background gradient in the first option, you can see there are multiple dominant colors while actually there are only 3 color dots in the base of the gradient—cyan, vivid magenta and orange.
In the following example, there are pastel colors in the background gradient. The transition is really soft and you won’t notice the new color in between.
While the created background is quite light, the white color is not very prominent. Of course, if you need the opposite result you can even enhance it reducing the opacity. But don’t forget, you should always check the contrast.
Here, the background gradient was created using one color(dark blue) and it’s tint, a lighter blue. This approach is a safe bet, you choose a color and then look for tint, shade or tone. But while you won’t lose in this case, you may not win in terms of expression. Such type of gradient might look too calm. Think whether it’s the exact emotion you need to have in the design.
Ah, the bright option, my favorite! Two colors, quite intensive, create the strong gradient. The contrast with white text is perfect. The mood is happy.
In case you need to make an action and draw people’s attention on the certain area, don’t be afraid of using intense colors and you’ll get a bold, unique solution.
Thank you Justin for a great song and we’re moving further to learn the gradientology science.
Why do we actually tend to use gradients in design? The simple explanation is that the gradient brings a more liveable picture to your work. Seeing the color transition is more natural, as in the world that surrounds us, we observe the same things.
The following examples show different ways of using gradients in the web.
One of the best examples at all times — Stripe — presents how to use gradients in B2B. Having one half of the page with gradients while the other part follows a minimalistic approach, the balance is achieved.
Another classic—Mixpanel website—reflects the combination of calm gradient on the background and detailed illustrations that are also based on the gradient filling. Illustrations take a primary role on the page, while background complements them. At the same time, CTA button is solid and has a high contrast to background, thus it catches our attention.
The creators of Monument Valley — Ustwo — use gradients to highlight the message. While there are not that many elements to be distracted on the page overall, the slogan attracts your attention right at the moment.
You see, even when the service has serious intentions on getting the worldwide popularity, it still isn’t afraid to use that kind of a game element as the gradient.
Looking for the perfect colors to create a gradient sometimes we get the unattractive results. Didn’t we choose the pure colors in the beginning?
Yes, we did, but in case you took a pair of complementary colors (hello Itten Color Wheel), you probably get that bad-looking color transition. Take a look on the first row.
The color in the middle looks quite dirty and thus, Michael Scott is sad. In such situation you can whether change one of the main colors (1 and 2 column) or add a point in the middle and move from the shade to the clear color (3 column). Simple!
S is for Smooth
Once, you created a gradient and noticed some line in between—Hm, not sure if it’s OK or not.
It’s not the rule you must change the gradient whenever you get such result, but if you do, the final option can be much smoother.
To reach it, you should spend some time adding dots to the center area of the gradient and slightly move them from the center to the top/bottom. Again, iterate each time adding dots further from the center and move the same way. Repeat these actions until you see the line has disappeared. And then, ta-da! Smooth is achieved.
In case you still do not want to proclaim “In Gradient I Trust” and don’t want to be called gradientolic, there is another path to go—the gradation. Actually, I do love to experiment with this technique as it adds the feeling of depth and versatility.
In the following example you can see the logo that was created using
At first, I created a gradient. Just be patient, it is a basis for the final result. Then, I made the second step—slightly changed the color in the middle in order to have a clearer light blue color. After that, I divided the line into the number of blocks and picked colors from the corresponding parts.
Another moment to remember—depending on whether the final colors have space between them (as the rectangles in the last image) or they overflow like in the logo, you get a completely different picture. Try both and see which one is more suitable in the particular task.
In this article I presented some fundamentals of working with gradients, the principles I achieved through practice. Indeed, there are much more tricks to learn and it’s a great journey. Some designers will say the gradient is a trend of this year, others will assure it’s a story from the past. I, personally, believe it’s a great tool that can enrich your design if you know how to use it. Rely on trends isn’t the right solution, your professional point of view and experience are much more precious. Keep practicing and find the brand new results.
Credit: Ludmila Shevchenko