repeating-linear-gradient() function - HTML CSS CSS

HTML CSS examples for CSS:Function

  1. HOME
  2. HTML CSS
  3. CSS
  4. Function

Definition and Usage

The repeating-linear-gradient() function creates a repeat linear gradient.

CSS Syntax

ValueDescriptionValue
angleangle of direction for the gradient. From 0deg to 360deg. Default is 180deg.
side-or-corner position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
color-stop1, color-stop2,... Color stops to render.A color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).

The following code shows how to create a repeating linear gradient:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!--   w  w  w  .jav  a2 s  .  com-->
    height: 200px;
    background: -webkit-repeating-linear-gradient(45deg,yellow,blue,black,pink 7%,green 10%); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(45deg,yellow,blue,black,pink 7%,green 10%); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(45deg,yellow,blue,black,pink 7%,green 10%); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(45deg,yellow,blue,black,pink 7%,green 10%); /* Standard syntax (must be last) */
}

#grad2 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(190deg,yellow,blue,black,pink 7%,green 10%); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(190deg,yellow,blue,black,pink 7%,green 10%); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(190deg,yellow,blue,black,pink 7%,green 10%); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(190deg,yellow,blue,black,pink 7%,green 10%); /* Standard syntax (must be last) */
}

#grad3 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(90deg,yellow,blue,black,pink 7%,green 10%); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(90deg,yellow,blue,black,pink 7%,green 10%); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(90deg,yellow,blue,black,pink 7%,green 10%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<p>A repeating gradient on 45deg axe starting red and finishing blue:</p>
<div id="grad1"></div>

<p>A repeating gradient on 190deg axe starting red and finishing blue:</p>
<div id="grad2"></div>

<p>A repeating gradient on 90deg axe starting red and finishing blue:</p>
<div id="grad3"></div>

</body>
</html>

Related Tutorials