How to create gradients was always the domain of photo editing software and vector creating programs, but now with modern technology and css3 you can create gradients with some coding that is fairly easy to learn. This is a brief guide on what you need to know on how to create gradients in css.
Where might I use gradients?
Gradient code is most likely to be used in buttons and backgrounds of websites or navigational system but don’t restrict yourself to just the common places that they are found, if you have a good idea for use of a gradient then go ahead and try it out, there are no limits to experimenting with code and creativity, the only limits to design is your imagination and maybe a bit of technical understanding.
Selecting colours in the Hex code for your gradient
When creating gradients it is useful to know the hex codes of colours. A hex code is short for hexadecimal numbers which are as follows : –
0 1 2 3 4 5 6 7 8 9 A B C D E F
0 being obsolete of colour ( or we know it as black ) and F is white. Combining a set of these numbers together in how monitors display colour ( RGB, Red , Green & Blue ) we can create over 16 million colours. I have shown below how numbers choose the intensity of each colour, it does help if you have a little understanding of how colours mix.
#ffff00
I have shown above that two numbers given in a 6 digit hex code make up a screen colour, so for instance the first two digits, ff equals maximum intensity red followed by two more ff’s which equates to maximum intensity green but I have finished this code with 00 in the blue which means there will be no blue displayed in this code.
Do you know what colour this makes? If you are a painter you will think brown but actually we are not mixing paints here, we are mixing light together so the colour returned is in fact yellow! Watch this video below of RGB to see how light mixes, it’s quite insightful.
If you want to select colour easily then w3schools have a colour picker on their website here or if you want to understand computer colour theory further please visit this informative link from htmlgoodies.com.
I’m more a visual person, I want to be able to see the gradient
The difference between coding a gradient and visually creating one via editing tools is great and sometimes a few numbers on a screen is a little hard to understand for the novice css coder or simply for the general human being, but there is a solution! Colorzilla.
Colorzilla this is how to create gradients in css
Colorzilla allows you to play with gradients till you are blue in the face, pardon the pun, till you find the perfect visual combination. Just like major photo/illustration editing tools you have oodles of options like adding more colour stops, selecting preset designs, the orientation of the gradient, opacity and other things you can find in major applications for editing visual elements.
What is even better about Colorzilla is that once you have created your gradient
the code is also generated so you can easily copy and paste the gradient code into your css style sheet for the relevant element of your site, it even applies webkits for browser compatibility! It’s a great tool but it is also important to understand the code rather than simply cutting and pasting. You can find many reasonable tutorial websites and I recommend spending at least an hour a day on advancing your skills, the thing with our profession is that it is ALWAYS evolving so it’s important that you don’t decay when new technology comes about.
To play with the gradient website please follow the link below and secondly, please leave a link in the comment box below on how you have used gradients in your designs. Happy digital colouring in!
Create your gradients with Colorzilla today
Here is an alternative with fewer options
And finally, a gradient animator!