CSS Gradient Generator

CSS gradients allows you to easily display a transition between 2 or more colours. Before CSS3 you would have to use images to create this effect. With images having to be a set size you could never get these to display correctly on all screen sizes.

Gradient Types

There are two types of gradients

  • Linear gradient types - up, down, left, right, diagonal
  • Radial gradient type

Browser Support

Browser support for CSS gradient is current at 90.09%.

Chrome Internet Explorer Firefox Safari Opera
26.0
10.0 -webkit-
10.0 16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
15.0 -webkit-
11.1 -o-

CSS Gradient Browser Support

How To Use The Tool

css-gradient-generator

As you can see there is a settings area on the left where you first select the orientation of the gradient you have a choice of:

  • Horizontal
  • Vertical
  • Diagonal
  • Radial

Next you have a button where you can add a new colour to the gradient. Then you can go through the colours in the settings area and select your colour and set a percentage of where you want this colour to start.

Horizontal

css-gradient-generator-horizontal

.preview-box{ 
    height: 300px; 
    width: 600px; 
    border: 1px solid #999; 
    background: #059900; 
    background: -moz-linear-gradient(left ,#059900 0%,#B0E8B4 100%); 
    background: -webkit-linear-gradient(left ,#059900 0%,#B0E8B4 100%); 
    background: linear-gradient(to right ,#059900 0%,#B0E8B4 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='undefined',  endColorstr='undefined', GradientType=1 ); 
}

Vertical

css-gradient-generator-vertical

.preview-box{ 
    height: 300px; 
    width: 600px; 
    border: 1px solid #999; 
    background: #059900; 
    background: -moz-linear-gradient(top ,#059900 0%,#B0E8B4 100%); 
    background: -webkit-linear-gradient(top ,#059900 0%,#B0E8B4 100%); 
    background: linear-gradient(to bottom ,#059900 0%,#B0E8B4 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='undefined',  endColorstr='undefined', GradientType=0 ); 
}

Diagonal

css-gradient-generator-diagonal

.preview-box{ 
    height: 300px; 
    width: 600px; 
    border: 1px solid #999; 
    background: #990000; 
    background: -moz-linear-gradient(-45deg ,#990000 0%,#E8BCBC 100%); 
    background: -webkit-linear-gradient(-45deg ,#990000 0%,#E8BCBC 100%); 
    background: linear-gradient(135deg ,#990000 0%,#E8BCBC 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='undefined',  endColorstr='undefined', GradientType=1 ); 
}

Radial

css-gradient-generator-radial

.preview-box{ 
    height: 300px; 
    width: 600px; 
    border: 1px solid #999; 
    background: #1E5799; 
    background: -moz-radial-gradient(center, ellipse cover ,#1E5799 0%,#7DB9E8 100%); 
    background: -webkit-radial-gradient(center, ellipse cover ,#1E5799 0%,#7DB9E8 100%); 
    background: radial-gradient(ellipse at center ,#1E5799 0%,#7DB9E8 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='undefined',  endColorstr='undefined', GradientType=1 ); 
}

Presets

css-gradient-generator-templates

The CSS gradient generator on Coveloping has 28 built in presets for you to choose from. You also have the ability to create your own gradients and save them into your presets to use at a later date.

Coveloping moderators will then look through the best saved presets to make available to the community.

Try It Now

Try out the CSS gradient generator now.

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!