Home > General > Creating gradients in Microsoft Paint.

Creating gradients in Microsoft Paint.

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!

Advertisements
Categories: General
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: