Codebox Software

Gradient Image Maker

Published: 09 Sep 2007

Note that many modern web browsers now support CSS 3 Gradients which can produce this effect using CSS only, without requiring an image file - you should use this approach if you can.

This utility generates 1-pixel wide images that fade from one colour into another. This type of image is often used by web-designers to create a 'fading background' or gradient effect, by repeatedly tiling the images using CSS.

Pick the 2 colours you want to use, enter the length you require (higher values give a more gradual fade) and specify the orientation, then click 'Go'. The 'Preview' link will take you to an automatically generated page incorporating the gradient effect that you have created, and displaying the CSS rules necessary to recreate it on your own page.

Length (pixels):