Johan's Blog

There are times when you need to create a gradient in order to fill the background of some div or other page element. For some people with Photoshop skills, this can be a relatively quick and simple task to do. However, some of us out there are not graphic designers nor typically have the time to learn the ins and outs of a fancy program like Photoshop or other tool. In this post I’m gonna show you how you can create a nice looking gradient that you can build in Microsoft paint in less than 1 minute.So here we go.

Let’s say you need a simple gradient (for a navigation menu or a div, button, etc.) that is 25 pixels in height.

1. Open up Paint and resize the default blank image to 100 pixels by 25 pixels as so.

2. Zoom in to make your drawing surface easier to see, select your first gradient color, followed by the line tool. You are going to draw a diagonal straight line from the bottom left corner to the top right corner( you can hold down [Ctrl] as you draw to ensure the line is straight).

3. Select the paint bucket and fill the bottom( or top) side of the line. Just make sure to only fill one side.

4. Resize the image by skewing the horizontal down to 1% only.

You will be left with a 1 pixel wide sliver of gradient that is 25 pixels in height. You can then use this to style an element’s background with CSS like so.

.coolGrad
{
background-image: url('../coolGrad.png');
background-repeat: repeat-x;
height: 25px;
}

The following image shows a div with the class above applied to it.

Obviously you can play around with the colors and height/width of the image in Paint to achieve unique results. But, in a nutshell, that’s it folks!