In this tutorial I will explain the simple steps for a faded background color for a shout box. I wasn't sure whether or not to put this under HTML or Photoshop, so I put in under Photoshop.

1. Open Photoshop and create a new image. The width and height should be a little wider than your shoutbox iframe. In this case I made it 145x140px.

2. The background layer should be the color of your background you set in your

3. Set the foreground color to your text color in the shoutbox. Select the gradient tool with it set as "Foreground to transparent". In this case I used #304F83.

4. Fill the image, going from top to bottom, with your gradient tool.

5. Now for the other gradient part. Make a new layer, get out your elliptical marquee selection tool (U). Make a selection similar to this.

6. Set your foreground color to #FFFFFF (white). Fill from the top of the image, down to the bottom of the selection with your gradient tool. Deselect it and make any opacity changes.

7. You can add text too. Now...onward to the CSS part. Add this to theof your page.

8. Change shoutbg.gif to your image URL/title. Then change #F0F0F0 to your desired background color.

9. This is how my finished product came out.