Original Editable
version 1 of 1



Background gradients are a staple of any web 2.0 site. They will double the credibility of your words.

Here's the gradient used on this page: gradient1.png

The CSS attatches the image to the <body> tag and then tiles the image horizontally. The background color is set to match the gradient stop.

user.css:

body {
  background: #F5F5F5;
  background-image: url(resources/gradient1.png);
  background-repeat: repeat-x;
  background-position: top;
}

A fancier trick is to use a translucent gradient, allowing the background color to show through it.