Sjabloon:Radial-gradient

Uit Apowiki

Use within a CSS style tag. The template uses the background-image property.

<div style="{{radial-gradient | position | shape [size] | #color [stop], #color [stop][, #color [stop], ...] }}">Lorem ipsum...</div>

  • position – Mandatrory. Specify the X and Y position of the center of the gradient. This can be any valid CSS position value.
  • shape – Mandatory. Specify the shape of the gradient using keywords or CSS size values. Valid keywords are:
  • ellipse
  • circle
  • size – Optional. Specify the size of the radial using keywords or CSS size values.note 1 Valid keywords are:
  • farthest-corner; Extends the radial to the farthest element corner, ensuring the gradient covers the entire element. This is the default.
  • closest-corner; Extends the radial to the closest corner.
  • farthest-side; Extends the radial to the farthest edge.
  • closest-side; Extends the radial to the closest edge, ensuring the gradient does not extend beyond the element's borders.
  • color – The first two colors are mandatory. You can define any number of additional colors, separated with commas.
  • stop – Optional. You can specify a stop position for each color using a percentage (e.g. 45%) or pixels (e.g. 60px).