Creating gradient images

So I'm working on this web site I mentioned before, and it's got a purple gradient image down the left side -- i.e. it's purple right at the edge, and then it gradually fades to white, like this:

I like it, so I put it on the new site. Stacy also likes it, but says she'd rather have it green, not purple. Well, I'm not a graphic designer, I just know HTML, CSS, PHP, stuff like that, so I have no idea how to change it from purple to green, or to create one from scratch. I do some googling and asked Gail, and she suggested that Microsoft Word has a thing called WordArt which does this sort of thing. So I played with Word until I found it. I managed to create the green gradient following these steps:

1. Used WordArt to create a word that changes from green to white. It can only do this in the background of the word, so I made the word "WWWWWW", just as wide as the old image. (I figured that W takes up more room than any other letter, so I would have the least amount of playing to do. Thinking about it later, I think using "IIIIII" would work better.)
2. Save the document as an HTML page. Word saved the document as a gif.
3. Load the gif into Microsoft Paint, and copy pixel colours until I have a single line of pixels that goes from green to white. Save as a png, otherwise Paint messes the colours up.
4. Create an html file that contains the style "background: url(images/greengradient.png); background-repeat: repeat-y;", so that the image is repeated down the left side of the page.
5. Load this html file in a browser, maximize the browser, and use the PrtScrn key to copy the desktop onto the clipboard.
6. Chop up the image until I have an image that's the size of the gradient on the original image (with the heart logo and the purple gradient), then copy it to the clipboard.
7. Load the original image in IrfanView, select the old gradient, and paste the new one on top.
8. Save the new image as a new gif.

Whew! Lots of steps, but it ended up looking pretty good. Unfortunately, Gail thinks the green at the left is too bright, which means I'll have to do the whole thing again, starting with a different green. Groan.