Recently while browsing through some good web design, I’ve been seeing a noticeable trend of using gradient in the design application. Gradient is essentially a gradation of two colours or more to create the effect of one colour fading into another. It can be used as a way to convey light source, to unflatten the design or to bring out the sense of space; it also can be used to bring more colours to brighten up the design.
During the skeuomorphic dominant design era, designers may use it more on the UI elements like buttons. In the modern web design, we can attribute the use of smooth gradient to Stripe, and Linear for the usage of gradient in dark web design. In this article I’ll show you some more examples of using gradient in web design.
8 examples of gradients in web design
In a few examples below, you can see the fluidic gradient background being the main element of the web design, and can be interacted by flowing around the cursor. This creates the sense of imaginative, dreamy like state like Monopo London, Jelly Pepper, and Jantana Hennard.
You also see gradients being applied on the dark-themed website, where it’s an effective way to communicate space and light like: Wope, Evervault and create.video. Other examples like Sally and Highnote, use gradient to fill up the empty space to create the sense of innovation and future state.
Monopo London
Jelly Pepper
Jantana Hennard
Wope
Evervault
Create.video
Sally
Highnote
There are many more examples out there, feel free to head over to my articles here on web galleries to look for more best examples of gradient application in design.
Resources and Tutorials
There are many techniques to create the gradient shown above using your favourite design tools like Figma, Photoshop or Illustrator. Here are some of the resources and tutorials you can check to create to achieve the gradient effect above.
- Figma plugin – Mesh Gradient
- Figma plugin – Noisy Gradient Generator
- Figma tutorial – Learn to create “Linear gradients” by FonsMans
- Figma tutorial – Learn to create dreamy multi-colour gradient by FonsMans
- Image – Gradient images on Unsplash
- Web generator – Generate beautiful mesh gradient with MeshGradient.in
- Framer – Copy and paste gradient effect code on Framer Supply
Comments