Web gradients are coming back are BACK as a design element for the online world. They have become an easy way to bring your website to life.
If they are well applied they give the eye a unified feeling which invites the user to stay on the website. This feeling arises out of the lack of harsh edges and breaks in the page structure.
As you can see in the above example, the gradient calms down the action of the background picture to make it suitable for being the background of this UI design.
Want to know the reason for it?
The secret is, that the harmony a gradient spreads derives from phenomenons in nature where mostly no harsh edges appear. Everything has an organic shape or soft transitions.
Also, humans have a great colour vision and enjoy seeing colours. Imagine a black and white gradient. It depends on the case but most likely it does not look that great and colourful gradients are preferred in many cases.
Why do you think everyone likes watching sunsets?
Or just puts their head up to the sky?
Using gradients in the background of a webpage can also be a discreet way to guide the visitor‘s view through the content without needing to place annoying arrows in the foreground.
The foreground should be used for the important information anyway and the background can fulfil a subordinate purpose.
Applied to elements like buttons and icons gradients can also lead to an easy 3D effect.
It is not always easy to find the suitable gradient and apply it properly with all these benefits.
Don’t worry. There’s a solution.
There are many tools online which already offer a lot of prepared gradients either just for inspiration or directly for integrating them easily into your website.
Now you just have to find out which tool will suit your needs the best.
Let’s get started.
Inspirational web gradients…
As mentioned, symodd is a classic example of how good web gradients can work as a simple background that is interesting and catching anyway.
Not only uses Qards a gradient as background but also they are applied to almost every single element especially to the icons and buttons.
Gogoro is using a gradient in a shape which makes it more dynamic and supports the purpose of the brand.
As you can see on these websites it is all about finding the proper balance and using colours in moderation.
Not an inspirational gradient:
This gradient is so ugly that I have to apologize presenting it here because it hurts the eye so much. It has too many colours that are all very different. Also, the plain black text in the foreground looks displaced and gets suppressed by the gradient.
So, if after seeing these examples you are still not quite sure if you could apply a gradient that is capable of supporting your project the way it should you can go deeper into web and graphic design.
Not enough?
[text-blocks id=”59315″]
Follow this guide from Shutterstock to get a better understanding of gradient types and advises on best practices.
…and where to find them
uiGradients
uiGradients is very easy to use because it has only two main screens. After loading you can directly see a random gradient on the whole screen.
With the arrows at the sides, you can switch within the big offer of all kinds of gradients. The second screen shows all gradients as a list to scroll through and sort by colour.
The atmosphere the web gradients create is supported by its individual name. As a special feature, you can also rotate your gradient to see how it looks like out of another perspective.
For people who want to contribute their created gradient to the community, the option exists to add your gradient to the collection via GitHub. This makes the variety of gradients almost unlimited.
uiGradients provides three ways to save your chosen gradient. If you want to recreate the gradient in a graphic design software or code you can simply copy the Hex Color Code.
For a direct implementation into your website, you can get the CSS code.
In order to save the gradient as inspiration just download the JPEG file.
WebGradients
This tool starts by showing the collection of 180 web gradients as a long list you can scroll through. Once you want to see more of one gradient just click on your selection and the colour will be shown all over your screen.
Each gradient has a name so it makes their possible application later on more concrete.
WebGradients is run by itmeo, a company that provides multiple digital tools online. Their gradient service, in this case, is free unless you do not want to download a Sketch or Photoshop file.
As in uiGradients you also have three possibilities to save your new found gradient inspiration here.
For every gradient, you can save a large PNG file to use it as a background for your own graphic design.
In order to use the exact colours and the gradient in a graphic design software or code, you can copy the Hex Color Code or get the CSS version of the gradient.
coolHue
This collection of gradients is already shown when you first open the website. You can choose within 60 colourful gradients. Just scroll through in each case six tiles in a row of this variety of gradient.
Unfortunately, there is no way to display the gradient full size.
The nice addition for coolHue is the animation when you hover over the gradient tiles which gives you a tangible impression of it.
The web gradients shall deliver their atmosphere to you just through the colours. That is why they do not have names in this tool. Therefore, in the bottom right corner, you have more options for Sketch and Photoshop.
When you hover over your selected gradient two more options appear. You can copy the CSS code for an easy implementation into your code or download a small PNG file.
If you want to use the exact colours you can just copy the Hex Color Code from below the gradient.
ColorSpace
ColorSpace offers you the option to choose and apply a gradient colour in 10 different directions. To apply a colour you can choose from the colour menu that pops up, the same as you would find in an image editing software. You can also paste a Hex Color Code of the colour so you get the exact colours you want to use.
The gradient is applied on the background across the entire screen. This gives you a very good feel of the colours’ mood, and motivates you to choose the colour that you feel may best suit the relevant subject you might be searching for.
With ColorSpace you can also copy the URL of your chosen colour gradient. This makes It very easy to share the options of colour without having to save a file and then sending it as an attachment or to send the specifications out of what the colour is. They can just see what you were looking at by clicking on the link you have sent and they will have all the information they need, the hexadecimal codes and the CSS code.
However if you do prefer saving a image file, unfortunately this website does not give you that option.
Ultimate CSS Gradient Generator
Now we come to the more complex tools which in this case as the name already says is only used for the integration into your CSS code.
The interface is split into four parts and reminds of a typical graphic design software. You can adjust or create presets, view this result in a small preview and have a look at the full CSS code.
The Ultimate CSS Gradient Generator is a part of the browser extension ColorZilla. Its gradient tool provides unlimited possibilities to create web gradients.
You can add as many colours as you want, adjust hue and saturation like you know it from your graphic design software, reverse the gradient and set the colours, opacity, and location of the gradient.
Apart from that, you can save your own created gradient to the presets, there is just the one way to export it with the CSS or SASS code.
But prior to this, you are able to set the size of the gradient, change the orientation of it to different directions and chose the colour format out of five given options.
Problems to decide?
| uiGradients | WebGradients | coolHue | Gradientify | Gradients.io | CSS Gradient Generator | |
|---|---|---|---|---|---|---|
| Full-screen view | + | + | – | + | – | – |
| Switch in full-screen view | + | – | – | – | – | – |
| List view | + | + | + | + | + | + |
| Amount of gradients | almost unlimited | 180 | 60 | 45 | 24 | unlimited |
| Sort gradients | by colour | – | – | – | – | – |
| Named gradients | + | + | – | + | + | – |
| Rotate gradient (change orientation) | + | – | – | – | – | + |
| Change colour opacity | – | – | – | – | – | + |
| Change colour location | – | – | – | – | – | + |
| More than two colours | + | – | – | – | – | + |
| Change hue/saturation | – | – | – | – | – | + |
| Reverse colours | + | – | – | – | – | + |
| Adding new gradient | + | – | – | – | – | + |
| Import image | – | – | – | – | – | + |
| Import CSS code | + | – | – | – | – | + |
| Change export size | – | – | – | – | – | + |
| Hex Color Code | + | + | + | + | + | – |
| CSS code | + | + | + | + | – | + |
| Chose colour format (CSS) | – | – | – | – | – | + |
| JPEG file | 1920 × 1080 | – | – | – | – | – |
| PNG file | – | 2400 × 2000 | 500 × 500 | – | – | – |
What web gradients tool is best to use always depends on your project, the time you have and the level of individuality or other quality requirements.
The table above can help you decide what tool you should best use for the outcome you wish to have.
Remember the most important thing?
Do not use too many colours – the best practice of today is to use just two colours which are also not too different.
What you should also pay attention to is the general design of your gradient, the way you apply it to your project later and how it fits into its environment.
uiGradients offers all important visual features as you can see on the table. This tool makes you imagine the gradient for your project in the best possible way.
If you want to go deeper into adapting the gradient for a high-quality web project you can combine uiGradients with the Ultimate CSS Gradient Generator by importing the CSS code or the downloaded image.
Now you’re ready to do it on your own. If you do decide to work with Gradients please let us know on twitter.
[text-blocks id=”59315″]
