Функция repeating-linear-gradient

La función repeating-linear-gradient define un gradiente lineal repetitivo. Esto significa que definimos un patrón de gradiente específico, por ejemplo, de 0px a 10px - gradiente de rojo a azul claro y este gradiente se repetirá en todo el bloque: de 0px a 10px, de 10px a 20px, de 20px a 30px y así sucesivamente.

Esta función se aplica a propiedades que definen una imagen de fondo: background, background-image o una imagen de borde: border-image, background-image-source.

Sintaxis

selector {
	background: repeating-linear-gradient([dirección], color1 tamaño1, color2 tamaño2...);
}

Valores

Valor	Descripción
dirección	Define una dirección específica del gradiente en cualquier unidad de ángulos o mediante palabras clave `top`, `left`, `right`, `bottom` o sus combinaciones. El orden de las palabras no importa. Este parámetro es opcional: si no se especifica, el gradiente irá de arriba hacia abajo. Antes de la dirección se coloca la palabra `to`.
ángulo	Ángulo en cualquier unidad de ángulos. Puede ser positivo o negativo. Parámetro opcional. Simultáneamente se puede especificar o el ángulo, o la dirección (o nada en absoluto).
color1	Color inicial del gradiente en cualquier unidad de color.
color2	Color final del gradiente en cualquier unidad de color.
tamaño	Define la extensión de un color específico del gradiente en cualquier unidad de tamaño.

Ejemplo . La variante más simple

El gradiente se verá así: de 0px a 20px color rojo sólido, de 20px a 40px - gradiente de rojo a azul claro. Y así se repetirá de arriba hacia abajo (para eso es un gradiente lineal repetitivo):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Ejemplo . Colores sólidos

El gradiente se verá así: de 0px a 20px color rojo sólido, de 20px a 40px - azul claro sólido (el detalle es que el segundo color comienza donde termina el primero). Y así se repetirá de arriba hacia abajo:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Ejemplo . Cambiemos la dirección

Ahora la dirección del gradiente será de derecha a izquierda:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Ejemplo . Dirección en grados

Como dirección especificaremos un ángulo en grados:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Ejemplo . Valor negativo

Hagamos la dirección con un valor negativo:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Véase también

la función repeating-radial-gradient,
que crea un gradiente radial repetitivo
la función linear-gradient,
que crea un gradiente lineal
la función radial-gradient,
que crea un gradiente radial