It’s a task that can’t be avoided if you want a gradient background, but remembering all the different properties to create a gradient is something you often need to bring out the manual for. Using a gradient a great way to go without having to worry about creating a gradient image and repeat it horizontally or vertically.
Don’t waste your time trying to remember all the various tags and properties, use the fantastic CSS Gradient Editor from Colorzilla!
It’s simply – AWESOME 🙂
Some of the additional features it provides are:
- IE 9 Support
- Ability to reverse your gradient with the click of a button
- Adjusting the Hue/Saturation
Try it for yourself. //www.colorzilla.com/gradient-editor/
Here’s what it can create for you.
Colour 1: #1E5799
Colour 2: #7db9e8
Sample output:
background: -moz-linear-gradient(left, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=1 ); /* IE6-9 */
Don’t get your HTML wrong ever again, your websites will be looking awesome in no time!
Article Update: 3rd October 2017
Another cool design resource available is Canva. Canva Colors helps with colour combinations. Give the Canva Colors tool a try!
