We’re going to dissect the current digital design trends, first up Gradients, one of the most mentioned themes in the results of our trends survey, carried out thanks to the collaboration of the Awwwards users and Jury. Check out the full survey results in our book NOW. A Contemporary Landscape for Digital Thinkers.

Gradients have been trendy for a while now, they initially made a comeback in a conventional way in backgrounds and images. Spotify made them popular again by applying duotone gradients over photos as a characteristic element of the brand in its campaigns and microsites. You can find a little tutorial here on how to create duotone gradients in photoshop.

This year we have seen various multicoloured gradients with vibrant color palettes and irregular shapes with blur and distortion effects. Gradients are currently being used in many ways but the most characteristic, in terms of trends, is their use being extended to secondary elements within the composition, such as hovers, titles, 3D elements, icons and more.

• Ruya Digital Gradients in Hover and Transitions In Transitions

• 

The iPhone X represents the paradigm of trends of 2018. In its landing page, ads, and many of the elements in its promotional campaigns, gradients of various tones are used above titles, texts or even the isotype. However, in the backgrounds and especially in the design on the home screen of the iPhone X, the gradients are NOT uniform like the traditional linear or radial gradients, but multicolored with irregular blending.

Gradients in 3D? Vertex color and colormap style

It seems obvious to talk about gradients in 3D, since illumination of the scene generates a gradation of light on the surface of the object, but what is inherent about this trend is precisely the use of gradients as a texture of the object, sometimes imitating the vertex color and colormap gradient techniques. Both techniques serve more than a purely decorative function, as they are used to represent data or map 3D objects.

• Unlikely Studio 3D Mapping In Trendy Gradients

Types of Gradients

We can blend colors in multiple ways, the most common being linear or radial gradients with different parameters like radius, orientation, opacity or color points. What’s trendy right now, as we have seen in the case of the iPhoneX, is the use of non-uniform blends which use gradient meshes or other techniques. With gradient mesh we distort the surface of the gradient to generate a freeform shape. We can find many types of gradients like monotone, duotone, multicolor, gradients ramps, etc, as demonstrated in the following graphic.

Useful Tools for CSS gradients

To recreate these effects in CSS there are loads of tools available that allow them to be created through visual editors, simply by copying and pasting the CSS code, as you can see here: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

• Khroma

  

• Webgradients

  

• Color Space

  

• Cool Hue

  

• Easing Gradients

  

• UI Gradients

  

Awwwards Gradients Collection

As always we have made a selection of SOTDs and nominees so you can see these effects in use, we hope you can find some inspiration in Awwwards Collections or in our book, NOW. A Contemporary Landscape for Digital Thinkers which discusses the main web design trends of the year.