The repeating-linear-gradient() Function

The CSS repeating-linear-gradient() function creates an image which represents a repeating linear gradient of colors. It's similar to linear-gradient() but it automatically repeats the color stops infinitely in both directions.

Syntax for repeating-linear-gradient()

Syntax

CSS

repeating-linear-gradient( [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list> ), where <side-or-corner> = "[ left | right ] || [ top | bottom ]", <color-stop-list> = "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#", <linear-color-stop> = "<color> && <color-stop-length>?", <linear-color-hint> = "<length-percentage>", and <color-stop-length> = "<length-percentage>{1,2}"

Notes

• Note the required "to" keyword before <side-or-corner>.

Recommended Links

• CanIUse.com: Search "repeating-linear-gradient()" (compatibility information)
• CanIEmail.com: Search "repeating-linear-gradient()" (email client compatibility information)
• CSS4: Repeating Gradients
• MDN: repeating-linear-gradient()

Search Engine Links (for more information)

• Bing "CSS repeating-linear-gradient function"
• Google "CSS repeating-linear-gradient function"