Tag Archive for: mobile responsive

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

gradient background

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”

flat design

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.

mobile ui design

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

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