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

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

repeating-linear-gradient() pega um trecho curto de cor e o repete para sempre ao longo de uma linha. Essa única ideia rende listras, toldos, barras de progresso e, com os irmãos radial e cônico, anéis e raios de sol, tudo sem imagem.

## The short version

- Um repeating linear gradient repete suas paradas de cor ao longo da linha do gradiente, e o comprimento de uma repetição é a posição da última parada.
- Listras secas surgem quando duas cores recebem a mesma posição, de modo que a cor muda na hora em vez de se misturar.
- Listras diagonais feitas com repeating-linear-gradient se encontram sem emenda em qualquer ângulo, ao contrário de um gradiente linear repetido com background-size.
- repeating-radial-gradient() cria anéis e ondulações, e repeating-conic-gradient() cria raios e explosões de sol.
- Bordas de cor secas podem parecer serrilhadas na tela, e uma transição de meio pixel a um pixel as suaviza.

Um **repeating linear gradient** em CSS repete um trecho curto de paradas de cor ao longo de uma linha até preencher o elemento. Escreva `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` e você ganha listras diagonais rosa, cada uma com 14 pixels de largura, sem arquivo de imagem. O comprimento de uma repetição é definido pela última parada, aqui 28px. Use a mesma ideia com `repeating-radial-gradient()` para anéis e `repeating-conic-gradient()` para raios.

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

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

- **A posição da última parada é o comprimento do bloco.** Paradas em `0`, `14px` e `28px` se repetem a cada 28 pixels.
- **Duas cores na mesma posição criam uma borda seca.** `#f472b6 0 14px, #fdf2f8 14px 28px` salta do rosa para o rosa-claro em 14px, sem mistura.
- **Cada parada aceita duas posições.** `#f472b6 0 14px` significa rosa sólido de 0 a 14px, o que é mais curto do que escrever a cor duas vezes.
- **Use comprimentos, não porcentagens, para listras.** Porcentagens são relativas à linha do gradiente, então as listras 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); }
```

Termine a repetição suave na mesma cor em que começou, senão você vai ver uma emenda seca a cada 40 pixels.

## Padrões de listras para copiar

- Listras de bala: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Toldo verde-azulado: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Risca de giz marinho: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Fita de advertência: `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 listras. Mude o ângulo para girar qualquer um deles e mude os comprimentos para mudar a escala; o padrão sempre se encaixa sem emenda.

O papel pautado é um bom exemplo de repetição assimétrica: 22 pixels de papel, um pixel de linha. O mesmo padrão com uma linha de margem vermelha por cima vira um caderno convincente. Mais ideias de padrões, incluindo grades e bolinhas, estão em [padrões em CSS](https://gradiently.design/pt-br/guide/css-patterns).

## Gradientes repetidos ou background-size

Você também pode fazer listras com um `linear-gradient()` comum e `background-size`, que repete uma pequena imagem do gradiente. Os dois funcionam. Eles se comportam de forma diferente em ângulos.

### linear-gradient + background-size

- Repete um retângulo, então listras a 45 graus exigem contas cuidadosas para alinhar
- Exato ao pixel para listras horizontais e verticais
- Fácil de combinar com outros blocos numa grade
- Anime movendo `background-position` um bloco inteiro

### repeating-linear-gradient

- Repete ao longo da linha do gradiente, sem emenda em qualquer ângulo
- Largura da listra definida direto em pixels
- Uma declaração, sem tamanho para manter em sincronia
- Anime movendo `background-position` ao longo da linha

Para qualquer coisa na diagonal, prefira primeiro a versão repetida. Para tabuleiros e grades, em que você precisa de duas direções ao mesmo tempo, `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 grade combina com páginas técnicas e dashboards.

A segunda cor do tabuleiro começa na posição `0`. Uma parada nunca pode ficar antes da anterior, então o navegador a empurra até onde a última cor terminou, o que cria uma borda seca 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 se repete para fora a partir de um centro, então as listras viram anéis. Mova o centro com `at` para criar ondulações que se espalham a partir de um canto. Como nos [gradientes radiais](https://gradiently.design/pt-br/guide/css-radial-gradient), `circle` mantém os anéis redondos; a elipse padrão os estica até a caixa.

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

Duas repetições radiais e duas cônicas. Paradas cônicas são ângulos: os raios de sol se repetem a cada 20 graus, então há 18 raios de cada cor.

## Raios com repeating-conic-gradient()

Gradientes cônicos giram em torno de um ponto, então suas paradas são ângulos. Escolha uma repetição que divida 360 por igual, como 20, 30 ou 45 graus, senão o último raio terá largura diferente dos outros. Mantenha as duas cores com luminosidade próxima num fundo; raios de alto contraste vibram na tela e roubam a atenção de todo o resto. A sintaxe completa está em [gradientes cônicos em CSS](https://gradiently.design/pt-br/guide/css-conic-gradient).

## Como corrigir bordas serrilhadas nas listras

Bordas secas em ângulo podem parecer em degraus, e em alguns níveis de zoom os navegadores as renderizam de forma desigual, então algumas listras parecem mais grossas que outras. A solução é dar a cada borda uma transição minúscula 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 é pequena demais para ser vista como gradiente, mas permite que o navegador aplique antialiasing à borda.

> **Linhas finas e telas de alta densidade** Uma linha de um pixel pode aparecer como dois pixels com metade da intensidade em algumas telas. Se uma risca de giz parecer borrada, tente um número inteiro de pixels do dispositivo ou uma linha um pouco mais larga numa cor mais suave.

## Uma barra de progresso animada estilo barbearia

Mover `background-position` exatamente uma repetição faz as listras andarem 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 que a barra e desliza para a esquerda exatamente essa repetição, então o loop não salta. Violetas de baixo contraste parecem atividade, não alarme, e como `background-position` repinta, use só em elementos pequenos.

Para fundos animados maiores, veja [gradientes animados em CSS](https://gradiently.design/pt-br/guide/css-animated-gradient), que trata de técnicas mais baratas. Listras e anéis são ótimos para detalhes, ingressos e estados de carregamento. Para um fundo que as pessoas reconheçam como seu, os Marks do Gradiently somam material, luz e granulação que um padrão repetido não tem, e renderizam em qualquer tamanho em que você criar.

## FAQ

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

Um gradiente linear mantém a última cor depois da parada final. Um repeating linear gradient recomeça as paradas, então um padrão curto preenche o elemento inteiro.

### Como faço listras em CSS?

Use paradas secas num gradiente repetido: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` cria listras diagonais de 14 pixels.

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

A posição da última parada de cor define o comprimento de uma repetição. Use comprimentos em pixels para que as listras mantenham a mesma largura em qualquer tamanho de elemento.

### Por que minhas listras em CSS ficam serrilhadas?

Bordas secas perfeitas em ângulo podem sofrer aliasing. Deixe um intervalo de cerca de um pixel entre cada par de paradas para que o navegador suavize a borda.

### Dá para fazer anéis ou raios com gradientes repetidos?

Sim. `repeating-radial-gradient()` cria anéis e `repeating-conic-gradient()` cria raios; as paradas cônicas são ângulos, não comprimentos.