Effects a linear gradient, starting in the directing given by the first argument (examples: left, top, top left), between the colors specified in the second and third arguments and optional fourth and fifth arguments. If there is no value for the first argument, it defaults to top-to-bottom.
Usage
This template is typed into the style of a div or span. Do not include a separate background for the selected element.
| Description
|
Example
|
<div style="{{LinearGradient}}">[[file:Spacer.gif|100px]]</div> produces a default top-to-bottom gradient from red to green:
|
|
<div style="{{LinearGradient|left|red|white|blue}}">[[file:Spacer.gif|100px]]</div> gives a three-colour gradient from left to right:
|
|
<div style="{{LinearGradient| top left | #ff0000 | #00ff00 | #0000ff }}">[[file:Spacer.gif|100px]]</div> gives a three-colour gradient from top left corner
|
|
The template accepts:
- Hexadecimal colors
- RGB colors
- RGBA colors
- HSL colors
- HSLA colors
- Predefined/Cross-browser color names
If the user's browser does not support linear gradients, this template defaults to the first colour selected. To use another default colour instead, add a default argument as follows:
<div style="{{LinearGradient|top|white|red|white|default=red}}">[[file:Spacer.gif|100px]]</div>
| With browser support
|
Without browser support
|
|
|
|
Browser support
| Browser
|
Supported versions
|
Browser
|
Supported versions
|
| Chrome
|
V 1.0 +
|
Safari
|
V 4.0 +
|
| Firefox
|
V 3.6 +
|
Opera
|
V 11.1 + [1]
|
| MSIE
|
V 10.0 + [2]
|
Android
|
V 2.1 +
|
| iOS
|
V 3.2 +
|
|
- ↑ Opera v 12.1 may present the colours in the reverse order to intended
- ↑ This may work on MSIE V 9.0 onwards, but there is conflicting information in that regard
