Template:Linear-gradient
<div style=" background-image:-moz-linear-gradient(start-position,color [stop],...); background-image:o-linear-gradient(start-position,color [stop],...); background-image:-webkit-linear-gradient(start-position,color [stop],...); background-image:linear-gradient(start-position,color [stop],...); ">Lorem ipsum...</div>
This template creates a gradient background. This currently works in Firefox (3.6 and up), Opera (11.10 and up), Safari (5.1 and up), Google Chrome (10 and up) and Internet Explorer (10 and up).
Usage
Use within a CSS style tag. The template uses the background-image property.
<div style="{{linear-gradient | start position | #color [stop], #color [stop][, #color [stop], ...] }}">Lorem ipsum...</div>
where
start position. Specify a start point:bottom,left,toporright, or a combination of two of each, e.g.top left. This provides eight starting points; if they are prefixed bytothis indicates the opposite final point. Or specify an angle of direction as indicated below. If there's no start or direction, the default direction of the gradient is from bottom to top (0 degrees).color– The first two colors are mandatory. You can define any number of additional colors, separated with commas.stop– Optional. You can specify a stop position for each color using a percentage (e.g. 45%) or pixels (e.g. 60px), if there's no stop provided, the first color specified be used at the start position (0%) and the last color specified will be used at the opposite position in the specified direction.
Colors can be specified using wellknown names for plain basic colors, or using hexadecimal RGB triplets (with 3 or 6 digits after a leading '#'). Colors specified with the syntax "rgb(r,g,b)" may also not work across all browsers. RGBA colors (with 4 or 8 hexadecimal digit after a leading '#', or may be using the syntax "(r,g,b,a)"), and HSL or HSLA colors are valid but may also not work across all browsers, or could be rendered without using their alpha transparency channel.
The color rendered at the center middle of the element's border-box will be interpolated at 50% of positions. Note that the start and end positions of the gradient may be outside of the border box and invisible (for example for directions at 45° when the box is not a square); this will occur as well when corners are rounded. So there may be no position in the box that match the first and last color specified. However the rendered colors should be almost identifical along any axis orthogonal to the specified direction of the linear gradient.
There are equivalent ways recognized to specify start positions or angles of direction (from the first stop color to the last one), where angles are mesured clockwise relative to the top direction (or relative to the bottom start position):
| 360deg | 400grad | 1turn | 0rad | | -360deg | 0deg | -400grad | 0grad | -1turn | 0turn | bottom = to top | -315deg | 45deg | -350grad | 50grad | -.875turn | .125turn | bottom left | left bottom = to top right | -270deg | 90deg | -300grad | 100grad | -.75turn | .25turn | left = to right | -225deg | 135deg | -250grad | 150grad | -.675turn | .375turn | top left | left top = to bottom right | -180deg | 180deg | -200grad | 200grad | -.5turn | .5turn | top = to bottom | -135deg | 225deg | -150grad | 250grad | -.375turn | .675turn | top right | right top = to bottom left | -90deg | 270deg | -100grad | 300grad | -.25turn | .75turn | right = to left | -45deg | 315deg | -50grad | 350grad | -.125turn | .875turn | bottom right | right bottom = to top left
Other values for the start position or angle of direction may not work across all browsers. You may also specify angles in radians, but they are not exact except for 0rad. Specifying an empty angle or start direction is equivalent to 0deg, 0grad, or 0rad.
Technical notes
The template does not assign a default background-color, and therefor does not provide an automatic fallback for browsers that do not support gradients. To provide a fallback, always specify a background color in front of the template.
This template uses the new CSS3 properties for linear gradients: -moz-linear-gradient, -o-linear-gradient, -webkit-linear-gradient and linear-gradient It does not use the legacy -webkit-gradient property due to its deviating parameter format. This means that this template does not work in Safari versions below 5.1 and Google Chrome versions below 10.
Examples
<div style="{{linear-gradient||#fdd,#ddf}}">Lorem ipsum...</div>will produce a vertical gradient from bottom (light red) to top (light blue):
<div style="{{linear-gradient|left|#fdd,#ddf}}">Lorem ipsum...</div>will produce the same gradient reoriented horizontally from left (light red) to right (light blue):
<div style="{{linear-gradient|left|#fdd,#dfd 50%,#ddf}}">Lorem ipsum...</div>will produce also an horizontal gradient for left (light red) to right (light blue), but where via a different color for the center of the box (light green):
<div style="{{linear-gradient|45deg|orange,aquamarine}}">Lorem ipsum...</div>will produce an oblique gradient passing from the bottom left corner (orange) to the top right corner (aquamarine); the gradient is really at 45 degrees (angle of direction measured clockwise from the top direction) and independant of the box size ratio, even if the surface is not square and the two corners will still have the two specified colors:
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.
See also