The Gradient option lets you fill an element with a gradient of your own design.
The Gradient Options panel consists of two main parts. The direction picker on the left (lets you choose the direction and orientation of the gradient), and the stop selector on the right (lets you choose what colors to use and where to put them). There is also a slider to allow you to set the opacity of the gradient.
This lets you choose which colors appear in your gradient. To add a color, simply click somewhere in the selector and another stop will be added (the color picker dialog will open for you to choose a color). Each stop is indicated by a small marker that appears to the right of the selector. You can select any stop by clicking on it, and the color picker dialog will open for you to change that color. You can also drag the stops around in the box to change their position. Clicking the Remove Marker button will remove the selected stop.
A linear gradient will appear in a linear fashion from one end of the element to the other. New gradients are linear by default. The direction picker will have a line with two ends; the start represented by a square, and the end represented by a triangle. Moving these around will control both the size and the direction of the gradient. The color of the start is indicated by the bottom most stop in the stop selector, while the end color is indicated by the top most stop.
If the Radial Gradient checkbox is selected, the gradient will appear in a circular fashion. The direction picker will have only a single rectangle in it, which you can click and drag to choose where in your selected element the center of the radial gradient will appear. In the stop selector, the bottom most color will be the center of the gradient, while the top most color will be the outer edge of the gradient.