Get the perfect gradient background with these templates

I mentioned in a previous post that bold and colourful gradient background have become one of the more versatile web design trends of late.

The ubiquity of gradient backgrounds in social media.

Gradient backgrounds are popping up more frequently in social media when users post status updates. And with screen resolutions improving all the time gradients look more smooth and subtle than ever before.

So I thought I could put something cool together that hopefully may inspire others in their work.

I’ve made a collection of my favourite colour gradients and organized them into a gallery for your viewing. Each image in the gallery has the hex codes that were used to create the gradient.

Gradient Background Gallery

Have you wondered why colour gradients are becoming so trendy right now? I think in a lot of ways it’s a progression from the flat design practise that’s been popular over the last 5ish years.

Take a journey with me through time, won’t you?

Back in the turn of the decade (that’s 2010 for those of you keeping up) the use of smart phones and touch interfaces was gaining steam. For the first time people were browsing web pages on their phones and designers needed to create visual clues that certain elements on a page were interactive. This was achieved predominantly by three concepts of design thinking: three-dimensional effects, skeuomorphism and realism.

And while some of these concepts worked well for desktop browsing they weren’t entirely great for mobile. Back then user-interface design elements consisted of a lot of glossy material-looking rounded corner buttons.

A sample of skeuomorphism UI design from around 2010-2011.

In an attempt to simplify the aesthetics and create interfaces that were authentically digital, designers started down the path of minimalist design by throwing out the need for glossy or three-dimensional shadowing effects.

But designers were in uncharted waters back in those days. Issues began to arise when users were becoming confused with what was interactive or not. In order to sort out errors in user efficiency, flat design evolved into what some now call “flat 2.0”

The use of flatter elements brought on a more intelligent use of colours.

While the flat aesthetic that took us from 2012-2017 is sleek and easy to look at, I found its major flaw was that it completely abandoned the concept of realism in design thinking. In reality, the human eye perceives depth through colours and shadows. Just think about nature. Look at the Toronto sky to the east in the mornings. You’ll most likely see graduated colour – blues, reds, oranges, yellows.

This is the same concept that’s being introduced to the design industry right now. Gradients and shadows help add a level of depth and reality to the design when done well.

This is what the future has in store for gradient backgrounds.

Be sure to check out UIGradients for more gradient colour combinations.

Author
Recent Posts

John Cerpnjak

John Cerpnjak is a Digital Marketing Director with expertise in performance marketing, conversion tracking, data & analytics. Originally from Oakville, he now operates from Liberty Village in Toronto. John received his honours bachelor's degree in Multimedia and Communication Studies from McMaster University in 2011. He also received a post-graduate certificate from Humber College for Advertising Copywriting in 2013. Currently, John works with various clients on all matters of lead generation and customer acquisition. Having a deep respect for the Liberal Arts and Humanities, John keeps up with current affairs and is often critiquing his media consumption. John is an avid snowboarder and art enthusiast. He has an insatiable love for 90's grunge and alternative rock as well as comic book superheroes.