GradientR.com
Generate gradient images for your Web 2.0 site
- Generator
- About GradientR
- How to add gradients to your layout
Created by Lasar Liepins, liepins.net.
GradientR builds on the shoulders of giants:
Here are a few examples for using your gradients with CSS. Basic CSS knowledge (where to put your CSS definitions) is expected. If you don't know CSS yet, start here.
This is the most basic definition that will get you going. It defines a background color, the URL to the gradient image and tells the browser how to repeat the image:
#myElement {
background: #000 url(/img/form_bg.png) repeat-x;
}
Since no positioning info was given, the background image will be put in
the upper left corner. repeat-x tells the browser to only repeat
it horizontally, i.e. to the right. When the element you are defining this for
is higher than the gradient, the background color kicks in. So in this case
the background color should match the color the gradient ends in.
If your gradient goes from the left to the right, the code is much the same:
#myElement {
background: #000 url(/img/form_bg.png) repeat-y;
}
Note that it now says repeat-y, which will repeat your
gradient from top to bottom.
Positioning your gradient at the bottom of the element is easy as well:
#myElement {
background: #EEE url(/img/form_bg.png) repeat-x 0 bottom;
}
The newly added 0 bottom tells the browser to put it on the
left side (just like it will by default, but when we add a vertical position,
both horizontal and vertical positions must be given). And bottom
tells it to start at the end, so to say.
In this case the background color should match the topmost color of your gradient, since that's where it will be shown if your element is higher than the gradient.
And to make things complete, here's how to put your gradient on the right side of an element:
#myElement {
background: #EEE url(/img/form_bg.png) repeat-x right;
}
And that's it.
Solid 
px