Template:Radial-gradient

This template is used to make a radial gradient.

Syntax

{{Radial-gradient
|(Position)
|(Shape) [size]
|(Color1) [Stop], (Color2) [Stop], (Color...) [Stop...]
}}

• The position can be any CSS position value.
• Shapes are:
  • elllipse
  • circle
• Sizes are:
  • farthest-corner
  • closest-corner
  • farthest-side
  • closest-side

Example

<div style="{{radial-gradient
|100px center
|ellipse farthest-corner
|#ffdddd, #ddddff, #ddffdd, #ffaabb 10%}}">*Example
*Example
*Example
*Example
*Example
*Example</div>

<div style="background-image: -moz-radial-gradient(100px center , ellipse farthest-corner , #ffdddd, #ddddff, #ddffdd, #ffaabb 10%); background-image: -o-radial-gradient(100px center , ellipse farthest-corner , #ffdddd, #ddddff, #ddffdd, #ffaabb 10%); background-image: -webkit-radial-gradient(100px center , ellipse farthest-corner , #ffdddd, #ddddff, #ddffdd, #ffaabb 10%); background-image: radial-gradient(100px center , ellipse farthest-corner , #ffdddd, #ddddff, #ddffdd, #ffaabb 10%); This template is used to make a radial gradient.

Syntax

{{Radial-gradient
|(Position)
|(Shape) [size]
|(Color1) [Stop], (Color2) [Stop], (Color...) [Stop...]
}}

• The position can be any CSS position value.
• Shapes are:
  • elllipse
  • circle
• Sizes are:
  • farthest-corner
  • closest-corner
  • farthest-side
  • closest-side

Example

<div style="{{radial-gradient
|100px center
|ellipse farthest-corner
|#ffdddd, #ddddff, #ddffdd, #ffaabb 10%}}">*Example
*Example
*Example
*Example
*Example
*Example</div>

<div style="">*Example

• Example
• Example
• Example
• Example
• Example">*Example
• Example
• Example
• Example
• Example
• Example