Gradient, My Dear Watson
As a designer born in the flat era I knew that gradient only exists next to the word DON’T. The year 2016 was predicting big things for it and it’s been correct, (Smashing magazine even predicted gradient trend in 2009).
Impossible as it may seem, 2017 is gradienter than 2016 was. Gradient was everywhere this year! We could find it in the background, in buttons, in borders, in texts, illustrations, animations etc.
Here's our view on the gradient subject.
Flat design and gradient 101
Flat design has been around for a while and it’s been compatible with other trends such as minimalism, responsive web design, and Material Design. It’s getting along with gradient as well. With gradient and shades, the flat design evolved into semi-flat (also known as almost-flat and Flat 2.0) design, which is great news for everyone - from users to designers.
By the principles of flat design, it’s not easy to be different and stand out and that is what every design wants to accomplish. With the freedom to use more colors and their combinations, designers get what they always wanted - a more acceptable specter of options.
There are so many new options:
- two similar colors,
- two opposite or just different ones,
- 3 or more colors in one element,
- slight white into the color gradient and
- slight color into black etc.
You can try imitating nature and make sky-like or sun-like gradient or you can try something nobody tried - combining and making weird but loud sludge.
More about the gradient
Gradient represents a variation of colors continuously with position, producing smooth color transitions.
Most common type is the linear one. A linear gradient is specified by two points and colors on that line. In Web design, a gradient is defined with CSS and it’s compatible with every browser.
Defining gradient in CSS is possible with background property. It’s possible to define:
- gradient type, linear or radial,
- shape for radial one,
- size, 4 different sizes,
- gradient direction, by angle or side,
- colors in every CSS format there is,
- repeat percentage of color.
Gradients are so popular!
Instagram changed the logo in 2016 to gradient one, Facebook added gradient glorifying option this year... It’s official, it’s not just another trend, it’s a new option in your palette!
Gradients for 2018 are an honorable mention in every design guide/predictable text/list. We can expect it in form of retro color gradient, in duotone form or combined with crazy patterns but it’s here to stay for sure! (Color transitions are the same thing as gradients, but it is predicted that to be its fancy name for the next year.)
To be honest, I’m not a gradient person, but I consider myself a good designer so gradient options are not rare in everyday decisions of mine.
Best gradient tools and examples
If you want to play with gradient tools, you should definitely try this one - uiGradient. And take a look at WebGradients. I definitely wouldn't mind if you'd be interested in CSSmatic. And this one - coolhue. And all three of them: Grabient, gradiently, and Blend. If you want to know more, be sure to check out Colorion and Unique gradient generator.
Some of my favorite best gradient examples are Paperplanes World, Lines, Swiss Army Man. As well as Fcinq, Justactions, Calmind, spicyweb, Lauren Anne Design, and Andrew Spencer. Some of the previously mentioned examples are used as photos in this text.