How to make cool Gradients
Learn a few tricks to make cool gradients for User Interfaces
Designing gradients is one of the coolest topics nowadays. Making a decent gradient is the key to discover new potentials in interface design. Creating a good gradient distinguishes your product and its interfaces from the others.
I previously told about why using gradients in your project is important here: Design with Gradients. But I didn’t tell the math behind it. In this post, I tell about it over some examples.
Soft linear gradients
Let’s dive into the depth of how to make linear gradients for your UI’s, with examples. If you want to prepare soft transitive ones, you need to use close colors. Look at the example below:
In above gradient, I used slightly different shade of green than the first one by changing color values of green from G208 to G163. Because the numbers are close and total light value is between ~600 and ~550, our gradient has a soft look. If you change the color elements into close ones, you will get the soft looking gradients.
We can change one or two from the RGB colors, and make them little different to create soft looking gradients. If you get wild and change the amount of the numbers too much, you will examine easily understandable color changes. See the example below;
In the first one, I change the amount of both green and blue lights, but with small percentages. So this gradient can actually be considered as a ‘flat color’ at first glance, but it has more natural look. In the second one, I change the amount of green dramatically, and I get a sweet gradient with a smooth distribution.
If your color has low light values like above (such as R239 G50 B50) or this (R239 G50 B150) decreasing the highest light value/s will add more black and change the look dramatically.
So, light is another important factor,
If you want to prepare soft looking gradients, you should take the amount of the light and the colors into account at the same time. From my experiences, I can say that the total numbers of red, green and blue should be at least 400. Because lower light means higher amount of black, and this leads us to dirty looks on the gradients. When you use too much black, there is a high probability that you will end up with a dirty look.
Between two gradients
Providing a gradient color scheme is another thing. For instance, if you need to provide different hero banners for different pages and need different gradients, you can select close gradients by making versions between colors.
Below we version the first color by only changing the Green value. and than we make another change with the blue one.
It’s not easy to create a mathematical formula to create soft looking gradients. The more you try, the more you will find the best ones. Your brand color, imagery you use, the impression you want to give should all be considered.
Most importantly, do not forget to continuously observe objects around you. Because it is designer’s job to notice that many elements around us are in soft gradients although they seem as if they are in flat colors. We are reducing the colors around us to flat colors, to understand and to be understood by others in our everyday lives. We reduce the meanings into understandable ones. Like yellow couch, green carpet, black screen. But without noticing, our brain has the real information about these colors, that they do not only consist of one color but plenty of soft shades. If we use the colors with their correct shades in user interfaces, our brains still grasp the reduced color while considering element as real.
❤ Do you like my article? Here are some others:
- Design with Gradients — How to design user interfaces by expanding your color palette
- The Designer’s Guide to the Law of Prägnanz — Fundamental principle of the Gestalt Theory
- The Designer’s Guide to Von Restorff Effect — Making items more memorable than the rest while designing interfaces
- Mental models and how we are shaping new application interfaces at OpsGenie
Also you can find me on Twitter as twitter.com/erkankerti, on Dribbble as dribbble.com/erkankerti, and on Behance as behance.net/erkankerti
