Função repeating-linear-gradient

A função repeating-linear-gradient define um gradiente linear repetido. Isso significa que definimos um padrão de gradiente específico, por exemplo, de 0px a 10px - gradiente de vermelho para azul claro e este gradiente será repetido por todo o bloco: de 0px a 10px, de 10px a 20px, de 20px a 30px e assim por diante.

Esta função é aplicada a propriedades que definem a imagem de fundo: background, background-image ou a imagem da borda: border-image, background-image-source.

Sintaxe

seletor {
	background: repeating-linear-gradient([direção], cor1 tamanho1, cor2 tamanho2...);
}

Valores

Valor	Descrição
direção	Define uma direção específica para o gradiente em quaisquer unidades para ângulos ou por palavras-chave `top`, `left`, `right`, `bottom` ou sua combinação. A ordem das palavras não é importante. O parâmetro é opcional: se não for especificado, o gradiente irá de cima para baixo. Antes da direção coloca-se a palavra `to`.
ângulo	Ângulo em quaisquer unidades para ângulos. Pode ser positivo ou negativo. O parâmetro é opcional. Pode ser definido ou o ângulo, ou a direção (ou nada).
cor1	Cor inicial do gradiente em quaisquer unidades para cor.
cor2	Cor final do gradiente em quaisquer unidades para cor.
tamanho	Define a extensão de uma cor específica do gradiente em quaisquer unidades para tamanho.

Exemplo . A opção mais simples

O gradiente ficará assim: de 0px a 20px cor vermelha pura, de 20px a 40px - gradiente de vermelho para azul claro. E assim se repetirá de cima para baixo (para isso que serve o gradiente repetido):

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

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

Exemplo . Cores sólidas

O gradiente ficará assim: de 0px a 20px cor vermelha pura, de 20px a 40px - azul claro puro (o detalhe é que a segunda cor começa onde a primeira termina). E assim se repetirá de cima para baixo:

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

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

Exemplo . Mudando a direção

Agora a direção do gradiente será da direita para a esquerda:

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

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

Exemplo . Direção em graus

Como direção, definiremos um ângulo em graus:

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

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

Exemplo . Valor negativo

Vamos definir a direção com um valor negativo:

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

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

Veja também

a função repeating-radial-gradient,
que cria um gradiente radial repetido
a função linear-gradient,
que cria um gradiente linear
a função radial-gradient,
que cria um gradiente radial