From Uncyclopedia, the content-free encyclopedia

Jump to: navigation, search

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.


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 +  
  1. Opera v 12.1 may present the colours in the reverse order to intended
  2. This may work on MSIE V 9.0 onwards, but there is conflicting information in that regard
Personal tools