Duotones And Gradients - Why Your Website Needs Them!

Website design trends for 2017 – using duotones and gradients on your website

There has been a big creative movement towards flat design, subtle drop-shadows, the use of geometric shapes, lines and patterns, minimal, clean design and other various design trends that have made head-way throughout 2016 and into 2017, but there are two creative styles that we really like and want to talk about – these are duotones and gradients.


Over previous years’ gradients have been missing from the design landscape, however they are now making a comeback – in fact a huge comeback, and rather than being a subtle colour gradient variation (like Apple’s iOS icons were) gradients are now big, bold and in-your-face and here to stay – quite possibly for the duration.

We have a subtle use of gradient on our website (look towards the bottom of the homepage) to make our most recent projects really pop, and whilst there will always be a place for clean, simple flat design, we think the marriage of gradients and flat design (and a splash of duo-tone) on a website is a match made in design heaven.

We use a gradient effect on the Vaccoda website homepage.

There are many websites that already use gradients as an integral part of the overall web design, and there will be many more to follow over this year and beyond. If gradients are used properly they can look amazingly good.

Some great examples of websites using gradients

If you are thinking about your new website or perhaps looking to upgrade your existing one and would like to incorporate gradients into the design, there are 3 fantastic examples currently out there.

Pitney Bowes


Pitney Bowes has balanced the use of gradients perfectly with a clean, simple design that is easy on the eye and balances out the design with white space, the use of flat icons and simple text areas. We think this design works well.



Stripe have recently updated their website and have included bold statement gradients in their slide-show. The contrast of bold blue/green gradient colours against the simple imagery with further use of gradients used in bold shapes on other pages looks great.  This website is a great example of flat design and gradients combined.

Product Design Weekly


As a one-page website, Product Design Weekly have used a range of various colour gradients, using colour changes to define each section of the web page. They have also gone one-step further and included duotone elements too and these also help with the distinction between each section.

Get gradient inspired!


We have found this awesome website that provides loads of different gradient options that you can see on-screen, in all their colourful glory. Why not have a flick through all the different colour combinations and get inspired!

Our thoughts on gradients

As you can see, gradients really make a website stand out and give a whole new visual dimension. Businesses need to be able to distinguish themselves against a sea of competitors and because of this we will be making full use of gradients on future web design projects we build for our clients.

Pitney Bowes use gradients for key information and balance with clean imagery and white space.


Another design trend for 2017 is the use of duotones. As Wikipedia states; A duotone is a halftone reproduction of an image using the superimposition of one contrasting colour halftone (traditionally black) over another colour halftone. This is most often used to bring out middle tones and highlights of an image. The most commonly implemented colours are blue, yellow, brown, and red.

When it comes down to creative design, there are no such restrictions on the colours used to create duotone images and there are many different examples online that use striking colours to create this incredible effect.

There are even colour combinations out there that you wouldn’t ever usually combine, but work so well when used on duotone images.

Why use duotone?

Duotone images are great for creating atmosphere of style on your website and to give a strong, defined vibe for your brand. Not only are duotones about combining colours that are contrasting to create a statement or focal point on your website but also to outstanding visuals using over-saturated hues that are almost fluorescent, and quite frankly, we think they look really cool.

Below are some example websites that use duotone images to perfection.

Mailchimp use duotones to perfection!



Popular email marketing platform, Mailchimp, have used duotone on their review page in a very clever way, guiding users using a spectrum of colour shifts, from hot red to ice blue as you scroll down the page. The use of duotone, imagery and subtle interactions really does enrich the user experience.

New Deal Design


This must be one of the best examples of duotone we have seen on a website. The hot pink and bold yellow looks awesome, and the consistent use of duotone throughout the website works so well.

Holm Marcher


This website is immersive, interactive and uses great pastel duotone colours to convey a calm yet highly professional look and feel. The muted tones are unobtrusive and inviting and don’t overload the user with too many distracting details. The same two tones are used everywhere on the website to maintain consistency, with complimentary soft blue colours to highlight certain text areas and buttons.

New Deal Design use bright, vibrant duotones to make their website really pop!

Our thoughts on duotones

Duotones look great and are fun to play with. Try combining your favourite colours or even consider really bold, bright opposing colours to see what cool styles you can come up with. duotone detail on websites can add emphasis, spice up an underused or otherwise boring image and engage users visually.

Duotones work equally as well on smaller details in addition to large images, and you can be clever and use duotone accents on navigation, secondary images or even specific types of content to aid user-journey.

In our upcoming web design projects we will be considering the use of duotones to create focal points, style and highly visual overall design flair.

Website design trends for 2017 – using duotones and gradients on your website
Article Name
Website design trends for 2017 – using duotones and gradients on your website
Website design has become a whole lot more colourful in 2017! In this blog we look at two of our favourite styles - duotones and gradients.
Publisher Name
Publisher Logo
Setting up a home-based business? Here are our top tips to get you started!
7 reasons people don’t trust your website and how to fix it!