I have never been a fan of gradients since I began studying Graphic Design, but recently I am beginning to reconsider their use in web design. I think the key is how the gradient is created. Being a combination of two or more colours, making a gradient is like a science experiment, You will need to use the right amount of ingredients or you risk blowing up the whole lab!

Gradients are now widely used across mobile apps, and it is no longer rare to see many UX / UI designer choosing gradients over solid colours. But, while apps are often developed with small screens in mind, websites are displayed across multiple resolutions and big screens. This means that using gradients is really risky if it is not done properly which is why many web designers have decided to apply gradients to some elements (like images) or just to small portions of the website.

The once predominant trend of flat colours and icons (see google material design for an example of this) is being challenged by interesting uses of gradients. I like how designers are approaching gradients and how developers are making some awesome tools available to create gradients online.


The NYC PRIDE website is an amazing example of gradients done well.
The navigation uses a solid gradient while the content has a background image with the gradient on top of it.

NYC PRIDE - Website

NYC PRIDE - Website

NYC PRIDE - Website


 

JustAction website uses a really nice pink gradient combined with black and white pictures. The contrast that it creates is really beautiful.

Just Action - Website Just Action - Website


If you are a developer you know how time consuming creating a gradient with CSS can be. Luckily there are websites that allow you to create gradients or generate random ones. I have listed two of my favourites below:

 

CSS Matic gradient generator is the perfect tool for a web developer to generate the perfect gradient.
Not only can you choose to generate in either CSS or SASS, but you can also import your own code and tweak it. The generated code can be made compatible for old versions of Internet Explorer by simply ticking the box on the right panel.

 

CSSMATIC - Gradient Geneator


UIGradients generates random gradients for you. You can choose gradients from a long list and also copy the CSS code to generate a JPEG image if you want to test the gradient in your design.
Is it also possible to submit your own gradient by adding it to the project repository on GitHub.

UI Gradients - Website

UI Gradients - Website