# Repeating linear gradient em CSS: riscas, anéis e padrões

[Canonical HTML page](https://gradiently.design/pt-pt/guide/css-repeating-gradient)

O repeating-linear-gradient() pega numa sequência curta de cor e repete-a para sempre ao longo de uma linha. Essa ideia dá-te riscas, toldos, barras de progresso e, com os seus irmãos radial e cónico, anéis e raios, tudo sem imagens.

## The short version

- Um repeating linear gradient repete as paragens de cor ao longo da linha do gradiente, e o comprimento de cada repetição é a posição da última paragem.
- As riscas duras surgem ao dar a duas cores a mesma posição, para a cor mudar de imediato em vez de se misturar.
- As riscas diagonais feitas com repeating-linear-gradient juntam-se sem costura em qualquer ângulo, ao contrário de um gradiente linear repetido com background-size.
- O repeating-radial-gradient() faz anéis e ondulações, e o repeating-conic-gradient() faz raios.
- As arestas de cor duras podem parecer serrilhadas no ecrã, e uma transição de meio píxel a um píxel suaviza-as.

Um **repeating linear gradient** em CSS repete uma sequência curta de paragens de cor ao longo de uma linha até preencher o elemento. Escreve `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` e ficas com riscas rosa na diagonal, de 14 píxeis cada, sem ficheiro de imagem. O comprimento de cada repetição é definido pela última paragem, aqui 28px. Usa a mesma ideia com `repeating-radial-gradient()` para anéis e com `repeating-conic-gradient()` para raios.

## Como funciona o repeating-linear-gradient()

A sintaxe é igual à de um [gradiente linear](https://gradiently.design/pt-pt/guide/css-linear-gradient) normal. A diferença está no que acontece depois da última paragem: em vez de manter a cor final, o browser recomeça o padrão. Duas regras fazem quase todo o trabalho.

- **A posição da última paragem é o comprimento do mosaico.** Paragens em `0`, `14px` e `28px` repetem-se a cada 28 píxeis.
- **Duas cores na mesma posição fazem uma aresta dura.** `#f472b6 0 14px, #fdf2f8 14px 28px` salta de rosa para rosa-claro aos 14px sem mistura.
- **Cada paragem pode ter duas posições.** `#f472b6 0 14px` quer dizer rosa sólido de 0 a 14px, o que é mais curto do que escrever a cor duas vezes.
- **Usa comprimentos, não percentagens, para riscas.** As percentagens são relativas à linha do gradiente, por isso as riscas esticam quando o elemento muda de tamanho.

```css
/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }
```

Termina a repetição suave na cor com que começaste, ou verás uma costura dura a cada 40 píxeis.

## Padrões de riscas para copiar

- Riscas de rebuçado: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Toldo verde-azulado: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Risca fina azul-marinho: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Fita de aviso: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Papel pautado: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Violeta em três tons: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Seis padrões de riscas. Muda o ângulo para rodar qualquer um deles e muda os comprimentos para os escalar; o padrão junta-se sempre sem costura.

O papel pautado é um bom exemplo de uma repetição assimétrica: 22 píxeis de papel, um píxel de linha. O mesmo padrão com uma linha de margem vermelha por cima faz um caderno convincente. Há mais ideias de padrões, incluindo grelhas e pontos, em [padrões CSS](https://gradiently.design/pt-pt/guide/css-patterns).

## Gradientes repetidos ou background-size

Também podes fazer riscas com um `linear-gradient()` normal e `background-size`, que repete uma pequena imagem do gradiente. Ambos funcionam. Comportam-se de forma diferente em ângulo.

### linear-gradient + background-size

- Repete um retângulo, por isso riscas a 45 graus exigem contas cuidadosas para alinhar
- Exato ao píxel em riscas horizontais e verticais
- Fácil de combinar com outros mosaicos numa grelha
- Anima-se movendo `background-position` um mosaico

### repeating-linear-gradient

- Repete ao longo da linha do gradiente, junta-se bem em qualquer ângulo
- Largura da risca definida diretamente em píxeis
- Uma só declaração, sem tamanho para manter sincronizado
- Anima-se movendo `background-position` ao longo da linha

Para tudo o que seja diagonal, usa primeiro a versão repetida. Para tabuleiros de xadrez e grelhas, onde precisas de duas direções ao mesmo tempo, o `background-size` com gradientes em camadas é mais simples.

```css
.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

.grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size: 32px 32px;
}
```

Dois padrões que precisam de `background-size`. O tabuleiro é o fundo clássico de transparência; a grelha serve páginas técnicas e painéis.

A segunda cor do tabuleiro começa na posição `0`. Uma paragem nunca pode ficar antes da anterior, por isso o browser sobe-a até onde a última cor terminou, o que faz uma aresta dura sem repetir o número. É um atalho útil em qualquer gradiente, repetido ou não.

## Anéis com repeating-radial-gradient()

A versão radial repete-se para fora a partir de um centro, por isso as riscas passam a anéis. Move o centro com `at` para fazer ondulações que se espalham a partir de um canto. Tal como nos [gradientes radiais](https://gradiently.design/pt-pt/guide/css-radial-gradient), `circle` mantém os anéis redondos; a elipse por defeito estica-os à caixa.

- Alvo índigo: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Ondulações suaves de um canto: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Raios âmbar: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Raios baixos desde o chão: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

Duas repetições radiais e duas cónicas. As paragens cónicas são ângulos: os raios repetem-se a cada 20 graus, por isso há 18 raios de cada cor.

## Raios com repeating-conic-gradient()

Os gradientes cónicos giram à volta de um ponto, por isso as suas paragens são ângulos. Escolhe uma repetição que divida 360 em partes iguais, como 20, 30 ou 45 graus, ou o último raio terá uma largura diferente dos outros. Mantém as duas cores próximas em valor num fundo; raios de alto contraste vibram no ecrã e roubam atenção a tudo o resto. A sintaxe completa está em [gradientes cónicos em CSS](https://gradiently.design/pt-pt/guide/css-conic-gradient).

## Como corrigir arestas de riscas serrilhadas

As arestas duras em ângulo podem parecer em degraus e, a certos níveis de zoom, os browsers desenham-nas de forma irregular, por isso algumas riscas parecem mais grossas do que outras. A solução é dar a cada aresta uma pequena transição em vez de um salto perfeito.

```css
/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}
```

A mistura é demasiado pequena para se ver como gradiente, mas deixa o browser suavizar a aresta.

> **Linhas finas e ecrãs de alta densidade** Uma linha de um píxel pode ser desenhada como dois píxeis de meia intensidade em alguns ecrãs. Se uma risca fina parecer desfocada, tenta um número inteiro de píxeis do dispositivo ou uma linha ligeiramente mais larga numa cor mais suave.

## Uma barra de progresso animada tipo poste de barbeiro

Mover o `background-position` exatamente uma repetição faz as riscas viajar sem salto. Para um padrão a 45 graus com repetição de 28px, a distância no eixo horizontal é a repetição dividida pelo seno do ângulo, cerca de 39,6px.

```css
.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { animation: none; }
}
```

A imagem é uma repetição mais larga do que a barra e desliza para a esquerda exatamente essa repetição, por isso o ciclo não tem salto. Violetas de baixo contraste lêem-se como atividade e não como alarme, e como o `background-position` repinta, limita-o a elementos pequenos.

Para fundos animados maiores, vê [gradientes CSS animados](https://gradiently.design/pt-pt/guide/css-animated-gradient), que trata de técnicas mais baratas. Riscas e anéis são ótimos para detalhes, bilhetes e estados de carregamento. Para um fundo que as pessoas reconheçam como teu, os Marks do Gradiently acrescentam material, luz e grão que um padrão repetido não consegue, e desenham-se em todos os tamanhos em que fizeres design.

## FAQ

### Qual é a diferença entre linear-gradient e repeating-linear-gradient?

Um gradiente linear mantém a última cor depois da paragem final. Um repeating linear gradient recomeça as paragens, por isso um padrão curto preenche o elemento todo.

### Como faço riscas em CSS?

Usa paragens duras num gradiente repetido: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` faz riscas diagonais de 14 píxeis.

### Como defino o tamanho de um gradiente repetido?

A posição da última paragem de cor define o comprimento de uma repetição. Usa comprimentos em píxeis para as riscas manterem a mesma largura em qualquer tamanho de elemento.

### Porque é que as minhas riscas CSS parecem serrilhadas?

Arestas duras perfeitas em ângulo podem sofrer aliasing. Deixa um intervalo de cerca de um píxel entre cada par de paragens para o browser suavizar a aresta.

### Posso fazer anéis ou raios com gradientes repetidos?

Sim. O `repeating-radial-gradient()` faz anéis e o `repeating-conic-gradient()` faz raios; as paragens cónicas são ângulos e não comprimentos.