Resources

Gradient Colour Generator

For many web designs images which consist of colour gradients are used for background images, footers and headers.

But since the web is all about loading times and trying to speed up your site loading time, CSS3 have improved the colour functionality to allow the developers to create colour gradients in any direction and colour.

But if you are having trouble getting your head around the colour gradients there is are some useful tools you can use to help with this.

The benefit of using a color gradient generator is that it will help you learn the correct syntax to use in your website design. There are many CSS3 Generators that hide the code from you as you are customising the look you want.

The best CSS3 Generators will display a preview box where the user can edit the look of the element without writing any code and then have an in view preview box of the code. Having a real time change of the code in a preview box that is in view means that the users will learn how their changes will affect the CSS code. The best way to learn something is by doing.

I feel that these CSS3 generators should be focused on teaching people the skills they need to understand the outputted code. This way they will not always need to the generator to create the colors.

ColorZilla

Ultimate CSS Gradient Generator - ColorZilla.com The generators will give multiple templates of different gradients and preview of the gradient. From here you can select the style of the gradient and the different colours used. When you have finished picking the style and colours this website will automatically generate the CSS for your gradient. Below is an example of a CSS that will be generated.

Here is an example of the outputted code the generator creates.

background: #4c4c4c; /* old browsers */

background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, 
#474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, 
#1c1c1c 91%, #131313 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), 
color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747),
 color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), 
color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', 
endColorstr='#131313',GradientType=0 ); /* ie */

ColorZilla Gradient Editor

CSS3 Gradient Generator

CSS3 Gradient Generator

CSS3 Gradient Generator

CSS3 Generator

CSS Generator

CSS3 Generator

Display Inline - CSS gradient generator

Display-inline.fr - CSS gradient generator

Display Inline CSS Gradient Generator

Microsoft CSS Gradient Background Maker

CSS Gradient Background Maker

Microsoft CSS Gradient Background Maker

Back to top

Gain access to all tutorials

  • Premium tutorials covering WordPress, Laravel and VueJS
  • Download premium content
  • Download premium WordPress plugins
  • Only $5 a month

Join Paulund