We all remember when flat graphics and icons took over the sphere of graphic design and brands across the globe started shifting towards this global trend. We’re now seeing another popular pattern rise towards the top of the ranks, particularly when it comes to web layouts.
It’s called the gradient and it’s been around for a fair while now. The only thing is that now it’s making a comeback like fluro did in the naughties. Perhaps the biggest brand to showcase this new look so far is Spotify, flaunting their ‘sensual’ vibe with duotone gradients.
The first and third squares show how Spotify is gradient as a palette.
Here’s a more obvious example from them, too.
We can probably thank Instagram for bringing this design aspect back, much like the beloved scrunchie. Ever since the iconic purple, pink, orange gradient showed up in our app list, we’ve been obsessed ever since (fun fact: that’s been since 2018).
Ultimately, this graphic design look is bringing vivid colours to the forefront, focusing on only a handful of shades to make images ‘pop’. But it’s not all that meets the eye – there’s more to it when it comes to establishing the ‘right’ gradient for your branding, particularly when it comes to understanding the different types. Yes, there are even multiple variations.
The best way to get your head around this is by looking at this nifty chart from Awwwards.com:
You’ll notice how they differ mostly in the direction the shades head in, and the emphasised feature. For example, we can see that silhouette has an entirely different subject and intention than the rest of them.
The reason why gradients are becoming such a cornerstone of web design is that they allow for composition and t the ability to experiment with secondary elements in the layout. From getting down to minuscule details on icons, 3D elements, titles and more, there’s far more to play with than any ordinary palette – it’s a web designer’s dream.
How Do You Make Gradients?
To effectively recreate these kinds of looks in CSS, you need to adopt the best possible tools. Thankfully, there are lots of free options out there, including:
Once you have an excellent tool under your weapon belt, the next important step is choosing the right colours. For your gradient to look well-balanced, the shades of colours (and hue) need to work together.
This all comes down to colour theory – which is a whole other story – but there are some general guidelines you can employ. To do this, look at the following colour wheel and try to make your decision based on these three rules we’ve listed:
Choose colours that are:
- Opposite of each other on the wheel
- Analogous (three shades side by side on the wheel)
- Triadic (three shades placed equally apart on the wheel).
A Few Things To Keep In Mind
Remember that the colour is just one part of forming your gradient’s purpose. It also needs to look the part and appeal to your target audience. While this trend is a big hit for millennials and younger generations, it may not be a higher impact on the elderly. Think carefully about who you are trying to speak to and only use these elements when they do your branding justice.
Above all, less is more – don’t overdo it. The most significant appeal of gradient web design is that it embraces simplicity.
*Heads to Photoshop to become a pro gradient expert*