Template:Gradient/doc

This template creates a gradient background. This currently works in Firefox (3.6 and up), Opera (11.10 and up), Safari (4.0 and up), Google Chrome and Internet Explorer 10. In other browsers, it only displays the start color as background color.

Usage
Use within a CSS style tag. The template uses the  and   properties, so best practice is to place it behind any other   properties.


 * 1)  - Mandatory. The start color of the gradient in CSS notation.
 * 2)  - Mandatory. The end color of the gradient in CSS notation.
 * 3)  - Optional.   (default) or , or specify start point:  ,  ,   or.
 * 4)  - Optional. Intermediate color between the start and end color.
 * 5)  - Optional. Position of the stop color between 0% and 100%. Default is 50%.

Each parameter must be placed in their respective position.

Examples

 * will produce

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


 * will produce

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


 * will produce

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Considerations
Above examples use contrasting colors to show the effect more clearly. It is best to use subtle differences in color to enhance the appearance, rather than radically change it. This also minimizes the effects between browsers that do and do not support gradients.