Web Cash

The other day I wrote about how to add a gradient background to a css tooltip. So I thought it might be a good idea to walk through how to create the actual gradient image.

Since I recently switched to Ubuntu Linux, I don’t use Photoshop anymore. GIMP all the way. So this tutorial will show you briefly how to create a gradient image in GIMP and then use it as the background of an html element.

Create a Blank Image (120px x 120px)

First thing - fire up GIMP and create a new image. Usually a gradient background image is 1 pixel wide. For now we’ll create a bigger image so it’s easier to see what we’re doing - 120 pixels by 120 pixels. You can crop the image down to a 1 pixel width later.

Set the Foreground and Background Colors

When you create a gradient, you need to set two colors - the beginning color (usually the foreground) and the ending color (usually the background color). To change these colors, click on the square swatch of the foreground color in your toolbar (see the circled area in the screenshot to the right).

This should bring up a box titled, “Change Foreground Color.” Pick a dark color - I used #981313. Then, click on the Background Color Swatch (the one right behind the Foreground color). Change the background color to a lighter version of your foreground color - I used #f17b7b.

Select the Gradient Tool

Now that you’ve chosen the two colors, you’re ready to create the gradient. Click on the “Gradient” tool - it’s the square that fades from black to light gray. See the screenshot to the right. There are a bunch of options you could customize, but for a standard gradient background image you’re better off leaving them alone.

Draw the Gradient! Then Crop Away

Now you can actually create the gradient by clicking and dragging on your image canvas. Position the tool at the top border of your canvas (if you look in the bottom left, it’ll tell you when you’re over pixel “0″). Hold down the Control button to force GIMP to draw a straight line, and drag the cursor down to the bottom pixel of your canvas.

Let go. Voila! You’ve got a nice gradient image created.

You could use it as-is in your css stylesheet, but it’s usually a good idea to trim your picture to 1px wide. The browser can simply repeat the image across the entire width of the element - so making it wider than 1 px is simply wasting bandwidth. Go ahead and crop the image now, and in the future make your gradient images 1 px wide by whatever height you want.

Now, let’s write the css to use this as a background image for an html element.

.gradient {
  background: #f17b7b url(images/gradient.png)
    repeat-x top; }

There’s four pieces to this shorthand css declaration.

• #f17b7b sets the background color. This is the same as the bottom color in our gradient, so that if the container is taller than the gradient image it seems to blend smoothly.
• url(images/gradient.png) sets our gradient image as the background image. Make sure you change the path to where-ever you uploaded your gradient image.
• repeat-x tells the browser to repeat the image left-to-right for the entire width of the container. This is what makes our 1-pixel background image “stretch” across the entire width.
• top simply tells the background image to align itself to the top edge of the container. Not always necessary, but your better safe than sorry.

And that’s all there is to it. Create an html element with class gradient and it should have your lovely gradient background.

So get to it. Start drawing.

Tags: css, GIMP, gradient, html, image, tutorial