FANDOM


Template documentation follows
Note: the template above may sometimes be partially or fully invisible.
Visit Template:Gradient/doc to edit this documentation. (How does this work?)
Description

This template creates a gradient background. This currently works in Firefox (3.6 and up), Opera (11.10 and up), Safari (4.0 and up), Google Chrome and Internet Explorer 10. In other browsers, it only displays the start color as background color.

Usage
Use within a CSS style tag. The template uses the background-color and background-image properties, so best practice is to place it behind any other background properties.
<div style="{{gradient | #start color | #end color | [orientation] | [stop color [| stop position]]}}">Lorem ipsum...</div>
  1. start color - Mandatory. The start color of the gradient in CSS notation.
  2. end color - Mandatory. The end color of the gradient in CSS notation.
  3. orientation - Optional. horizontal (default) or vertical, or specify start point: left, top, right or bottom.
  4. stop color - Optional. Intermediate color between the start and end color.
  5. stop position - Optional. Position of the stop color between 0% and 100%. Default is 50%.
Each parameter must be placed in their respective position.
Examples

<div style="{{gradient|#ffdddd|#ddddff|horizontal}}">Broforce...</div> will produce

Broforce is a side-scrolling run and gun platform video game developed by Free Lives Games, released initially in 2012. The game was first released as a jam game on April 2012 and later raised in development and popular among public. A demo of the full game called Broforce Brototype was released on October 2012 and has been updated since July 2013. A release date has not been announced but developers plan to release the full game sometime in 2014.

<div style="{{gradient|#ffdddd|#ddddff|horizontal|#ddffdd|50%}}">badass...</div> will produce

badass (noun) (plural badasses)
  1. (US, slang) A mean or belligerent person; a person with extreme attitudes, behavior or appearance.
Don't mess with that guy, he's a real badass.
badass (adj.) (comparative more badass, superlative most badass)
  1. (US, slang) Having extreme appearance, attitude, or behavior that is considered admirable.
That tough guy looks badass.

<div style="{{gradient|#ffdddd|#ddddff|vertical}}">awesome...</div> will produce

awesome
  1. Causing awe or terror; inspiring wonder or excitement.
    The waterfall in the middle of the rainforest was an awesome sight.
    The tsunami was awesome in its destructive power.
  2. Excellent, exciting, remarkable.
    That was awesome!
    Awesome, dude!
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.
Community content is available under CC-BY-SA unless otherwise noted.