One of the defining trends in website design and digital design is the use of gradient. Although this design technique can generate images of early windows gradient makers, when done correctly It can give an air of creativity and sophistication to any website. Gradient in web design has been in trend for a while, initially implemented into backgrounds and images in branding to add an element to unify any corporate branding. Spotify notibally raised popularity by applying a graduated two-tone fade over the top of photos to unify their brand.
Credit: Spotify 2015 microsite
Modern uses of gradient in web design are seeing bold colour palettes and unusual geometric patterns, often applied alongside with distortion and blur effects. However, the most characteristic use being currently used is in secondary website elements such as hover effects, titles, icons and more.
Hover effects gradients
Even Apple, a company often praised for their clean and intelligent web design, are seen using element of gradient in their latest website design and digital media. The iPhone X media saw gradated X elements used in the Landing Page Design, Paid Adverts, and many of the promotional campaign elements such as text and titles. However, Apple has used an irregular graduation to make this simple effect work better as a defining brand element.
3D website design elements
Although gradients are a fundamental requisite in making a 2D image appear 3D through the use of shading and illumination on the surface of any object you are trying to make pop, latest trends see gradients being usd to texture an object’s surface.
Credit: 3D Gradient Mapping, Unlikely Studio 3D Mapping
Read more below…
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.
Download the Gradients Source File!
Get involved with gradients, download the source file free in vector format .ai or pdf to do your own design experiments with the gradients from the poster.
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.
- Elje-group Gradients In Gradient Gradients
- Keyboard interaction In Hovers, Cursors and Cute Interactions
- Gradient transition color menu In Menus Inspiration
- Ponto WS Gradients In Trendy Gradients
- Magdiel Lopez Portfolio In Trendy Gradients
- Rollover – The Engine In Hovers, Cursors and Cute Interactions
- Contemple Studio In Hovers, Cursors and Cute Interactions
- Ruya Digital Gradients in Hover and Transitions In Transitions
- Dot navigation – Adobe Digital Marketing Study In The Best of Navigation
- The Engine Gradients in hovers and animated elements In Gradient Gradients
- Homepage In Parallax
- Interactive Colorful Menu In Menus Inspiration
Author: AWWWARDS TEAM
Link to original article: https://www.awwwards.com/gradients-in-web-design-elements.html