(Last Updated On: October 3, 2017)

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: #1e5799; /* Old browsers */
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!