Template:LinearGradient

Template documentation

This documentation is transcluded from Template:LinearGradient/doc. (edit | history)
Editors can experiment in this template's sandbox (create) and test cases (create) pages.
Subpages of this template.

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 +
MSIE	V 10.0 +	Android	V 2.1 +
iOS	V 3.2 +