Template to make gradient backgrounds. Modified from source page of

Currently works in Firefox (3.6 and up), Safari (4.0 and up) and Google Chrome. In other browsers, it only displays the start color as background color.

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.

Full syntax:

<div style="{{gradient|#000000|#FFFFFF|vertical|#00FF00|30%|fallback=#000000}}"> </div>
  1. StartColor - Hexadecimal notation of start color of gradient
  2. EndColor - Hexadecimal notation of ending color of gradient
  3. Orientation - Optional. horizontal (default) or vertical
  4. StopColor - Optional. Intermediate color between the start and end color
  5. StopPosition - Optional. Position of stop color between 0% and 100%. Default is 50%
  6. fallback - Optional. Sets fallback color for browsers which do not support gradients. Defaults to StartColor

Using source mode:


For example:

<div style="{{gradient|#CC4444|#44CCCC|horizontal|#44CC44|50%}} height:50px;">



Community content is available under CC-BY-SA unless otherwise noted.