The CSS -moz-repeating-radial-gradient Mozilla extension property value works similarly to the standard radial gradients as described by -moz-radial-gradient, but it automatically repeats the color stops infinitely in both directions, with their positions shifted by multiples of the difference between the last color stop's position and the first one's position.

Mozilla currently only supports CSS gradients as values of the background-image property, as well as within the shorthand background. You specify a gradient value instead of an image URL.


Value Description
<position> A position, interpreted in the same way as background-position or -moz-transform-origin. If omitted, the default is center.
<angle> An angle establishing the gradient line, which extends from the starting point at this angle; this is 0deg by default.
<shape> The gradient's shape. This is one of circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). The default value is ellipse.
<size> The size of the gradient. (See below)
<stop> This value is comprised of a color value, followed by an optional stop position (either a percentage between 0% and 100% or a length value along the gradient axis). Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
Size Constants
Value Description
closest-side The gradient's shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-corner The gradient's shape is sized so it exactly meets the closest corner of the box from its center.
farthest-side Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-corner The gradient's shape is sized so it exactly meets the farthest corner of the box from its center.
contain A synonym for closest-side.
cover A synonym for farthest-corner.

CSS example:

body {
      background:-moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

That will produce:

-moz-repeating-radial-gradient Example

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