This page is semi-protected against editing.

Template:Linear-gradient

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search
<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>
Documentationview · edit · history · purge ]
This documentation is transcluded from Template:Linear-gradient/doc.


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

  1. start position. Specify a start point: bottom, left, top or right, or a combination of two of each, e.g. top left. This provides eight starting points; if they are prefixed by to this 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).
  2. color – The first two colors are mandatory. You can define any number of additional colors, separated with commas.
  3. 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):
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.
  • <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):
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.
  • <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):
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.
  • <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:
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.

See also