Gradients, welcome back. Although it seemed that they had gone forever and without a trace, as practice shows, history always repeats itself, and material design, flat style and iOS8 inspired patterns have prepared the fertile ground for it. As a result, one cannot but agree that there is a rise in popularity in this direction. Not only do gradients affect mobile UIs but also extend their influence over website designs. Today we are going to take a look at 20 visual case studies of this.

Unlike the conventional use of gradients i.e. solely as backgrounds, the modern solution implies the utilization of gradients for various purposes. Subtle overlay screen with a low opacity, complimentary canvas for animations, focal point or even an instrument for giving prominence to selected elements – these are the most common ones. The point is not to destroy the aesthetics but to preserve harmony; that is why in the majority of cases white color, solid typography and outline graphics are chosen as the gradient’s primary companions, since they, like no others, are able to achieve consistency. So let’s explore our examples.

To show main source of content: