# Padrões CSS com gradientes repetidos

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

Paradas de cor duras transformam gradientes em formas, e o background-size transforma formas em ladrilhos. Com essas duas ideias você desenha os padrões clássicos em poucas linhas, sem arquivos de imagem.

## The short version

- Os padrões CSS são desenhados com gradientes que usam paradas de cor duras, então as cores trocam de uma vez em vez de se misturar.
- As funções repeating-linear-gradient, repeating-radial-gradient e repeating-conic-gradient repetem suas paradas até preencher o elemento, o que desenha listras, anéis e raios.
- O background-size transforma um único gradiente em ladrilho, e é assim que se constroem grades de pontos, grades de linhas, xadrez e vichy.
- Posições de parada escritas em pixels mantêm as listras nítidas e regulares, enquanto porcentagens podem gerar bordas irregulares e borradas.
- Padrões atrás de texto devem ter pouco contraste, para que as palavras continuem fáceis de ler.

Os **padrões CSS** são fundos repetidos, como listras, grades, bolinhas e xadrez, desenhados só com funções de gradiente. Duas ideias fazem tudo funcionar. Paradas de cor duras, em que duas paradas ocupam a mesma posição, transformam um gradiente numa borda nítida. A repetição, seja com as funções de gradiente `repeating-*` ou com o ladrilhamento do `background-size`, transforma uma borda num padrão. O resultado pesa alguns bytes, escala com perfeição e pega as cores das suas variáveis CSS.

- Listras diagonais: `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`
- Filete: `repeating-linear-gradient(90deg, #0f172a 0 23px, #475569 23px 24px)`
- Anéis: `repeating-radial-gradient(circle at 50% 50%, #fef3c7 0 8px, #fcd34d 8px 16px)`
- Raios: `repeating-conic-gradient(#0f766e 0 15deg, #115e59 15deg 30deg)`
- Listra de bala: `repeating-linear-gradient(-45deg, #fdf2f8 0 14px, #f9a8d4 14px 18px)`
- Papel pautado: `repeating-linear-gradient(0deg, #eff6ff 0 27px, #bfdbfe 27px 28px)`

Seis padrões, cada um um único gradiente repetido. Copie qualquer um direto para o `background`.

## Como as paradas duras criam formas

Um gradiente se mistura entre paradas vizinhas. Se a próxima parada começa exatamente onde a anterior terminou, não há distância para misturar, e a cor muda numa linha dura. O atalho para isso é uma cor com duas posições, como `#1e293b 0 10px`, que mantém a cor chapada de 0 a 10 pixels. O guia de [gradiente linear em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient) trata em detalhe de paradas, dicas e paradas duras.

```css
/* a soft blend */
background: linear-gradient(90deg, #1e293b, #334155);

/* a hard edge at 50% */
background: linear-gradient(90deg, #1e293b 50%, #334155 50%);

/* the same stripe pair, repeated every 20px */
background: repeating-linear-gradient(90deg, #1e293b 0 10px, #334155 10px 20px);
```

Da mistura à borda e ao padrão, em três passos.

## Listras com repeating-linear-gradient

O `repeating-linear-gradient()` repete a lista de paradas ao longo da linha do gradiente até o elemento ficar cheio. O comprimento de uma repetição é a posição da última parada, então `0 10px, 10px 20px` repete a cada 20 pixels. Mude o ângulo para fazer diagonais e mude a proporção entre as duas faixas para obter filetes ou listras largas de toldo.

| Padrão | Paradas | Efeito |
| --- | --- | --- |
| Listras iguais | `A 0 10px, B 10px 20px` | Faixas iguais, repetição de 20px |
| Filete | `A 0 23px, B 23px 24px` | Uma linha de 1px a cada 24px |
| Toldo | `A 0 40px, B 40px 80px` em `90deg` | Faixas verticais largas |
| Linha dupla | `A 0 20px, B 20px 22px, A 22px 26px, B 26px 28px` | Duas linhas finas bem juntas |

Receitas de listras. A e B são as suas duas cores; a última parada define o comprimento da repetição.

> **Diagonais nítidas** Bordas duras em ângulo podem parecer serrilhadas. Deixar meio pixel entre as paradas, como em `#1e293b 0 10px, #334155 10.5px 20px`, dá a cada borda um fio de suavização e o resultado parece mais liso.

## Grades, bolinhas e ladrilhos com background-size

Alguns padrões não podem ser desenhados por um único gradiente repetido: uma grade de pontos precisa de repetição em duas direções. A solução é desenhar um ladrilho, como um ponto ou um canto de grade, e então definir o `background-size` com o tamanho do ladrilho. Os fundos se repetem por padrão, então o ladrilho preenche o elemento.

```css
.grid-lines {
  background-color: #0f172a;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.dots {
  background-color: #fefce8;
  background-image: radial-gradient(#ca8a04 1.5px, transparent 2px);
  background-size: 20px 20px;
}

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 24px 24px;
}
```

Uma grade de projeto, uma grade de pontos e um xadrez. Cada um é um ladrilho repetido pelo `background-size`.

A grade são dois gradientes: um desenha uma linha horizontal de 1px no topo de cada ladrilho e o outro uma linha vertical na borda esquerda. Os pontos são um pequeno gradiente radial que fica transparente depois de 2 pixels. O xadrez usa um [gradiente cônico](https://gradiently.design/pt-br/guide/css-conic-gradient) dividido em quartos, e é por isso que precisa de uma só camada.

## Vichy, xadrez escocês e zigue-zague

Sobrepor listras semitransparentes cria padrões tecidos: onde uma faixa horizontal e uma vertical se cruzam, as cores se somam e o quadrado escurece. Isso é o vichy. Acrescente um segundo conjunto de listras mais finas em outra cor e ele vira xadrez escocês. Os zigue-zagues vêm de quatro cantos triangulares, cada um desenhado com uma parada dura em 25% num ângulo diferente.

```css
.gingham {
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(220 38 38 / 0.45) 50%, transparent 0),
    linear-gradient(rgb(220 38 38 / 0.45) 50%, transparent 0);
  background-size: 24px 24px;
}

.zigzag {
  background-color: #e0f2fe;
  background-image:
    linear-gradient(135deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(225deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(315deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(45deg, #0ea5e9 25%, transparent 25%);
  background-position: -16px 0, -16px 0, 0 0, 0 0;
  background-size: 32px 32px;
}
```

Um vichy vermelho e um zigue-zague azul-céu. No zigue-zague, as duas primeiras camadas são deslocadas meio ladrilho para os triângulos se encaixarem.

## Listras em movimento para barras de progresso

Listras diagonais animadas são a forma clássica de mostrar que algo ainda está em andamento. Desenhe as listras como um ladrilho com `background-size` e depois mova o `background-position` exatamente a largura de um ladrilho. Como o quadro final é igual ao inicial, o loop não tem salto visível. Use em elementos pequenos e desligue para quem prefere [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion).

```css
.progress {
  background-color: #4f46e5;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25% 50%, rgb(255 255 255 / 0.18) 50% 75%, transparent 75%);
  background-size: 28px 28px;
  animation: crawl 1s linear infinite;
}

@keyframes crawl {
  to { background-position: 28px 0; }
}

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

Listras que avançam por uma barra de progresso. A distância da animação é igual à largura do ladrilho, então o loop é contínuo.

## Tamanho, temas e escala dos padrões

Escreva posições de parada e tamanhos de ladrilho em pixels ou em `em`, não em porcentagens. As porcentagens dependem do tamanho do elemento, então as listras se esticam de forma irregular quando ele muda de tamanho e as bordas podem cair entre pixels e ficar borradas. Usar `em` faz o padrão escalar com o texto ao redor, o que combina com selos e etiquetas estampados.

As propriedades personalizadas tornam os padrões reutilizáveis. Defina as cores e o tamanho uma vez e depois varie por componente ou por tema, por exemplo um padrão mais claro no modo claro e um mais discreto no [modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design).

```css
.stripes {
  --a: #1e293b;
  --b: #334155;
  --w: 10px;
  background: repeating-linear-gradient(45deg, var(--a) 0 var(--w), var(--b) var(--w) calc(var(--w) * 2));
}

.stripes--warm {
  --a: #fff7ed;
  --b: #fed7aa;
  --w: 14px;
}
```

Um padrão, com tema trocado por três variáveis.

## Padrões atrás de texto

### Evite

- Listras de alto contraste diretamente atrás do texto corrido
- Padrões finos que tremeluzem quando a página rola
- Padrões na mesma cor do texto
- Vários padrões diferentes numa só tela

### Faça

- Padrões de baixo contraste, dois tons próximos de uma mesma cor
- Ladrilhos maiores e mais calmos em superfícies grandes
- Um painel sólido sob o texto que fica sobre um padrão movimentado
- Um único padrão como destaque reconhecível

Padrões são um tipo de textura, e valem as mesmas regras: sutis o bastante para serem sentidos, não lidos. A [textura de fundo](https://gradiently.design/pt-br/guide/background-texture) trata de grão, papel e tecido; o [texto sobre fundos cheios](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds) trata de manter as palavras legíveis por cima.

## FAQ

### Como fazer listras em CSS?

Use `repeating-linear-gradient()` com paradas duras, como `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`. Mude o ângulo para a direção e os comprimentos para a largura.

### Como fazer um padrão de bolinhas em CSS?

Desenhe um ponto com `radial-gradient(#ca8a04 1.5px, transparent 2px)` e repita com `background-size: 20px 20px`.

### Como fazer um xadrez em CSS?

Use `repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%)` com um `background-size` como `24px 24px`. Cada ladrilho tem quatro quadrados.

### Por que as minhas listras CSS ficam borradas ou irregulares?

Posições em porcentagem podem cair entre pixels. Use comprimentos em pixels ou em em para paradas e tamanhos de ladrilho e deixe meio pixel entre as paradas nas bordas diagonais.

### Padrões de gradiente CSS são melhores que padrões em imagem?

Para padrões geométricos, em geral sim: não exigem download, ficam nítidos em qualquer tamanho e podem ser recoloridos com variáveis CSS. Texturas orgânicas ou fotográficas ainda precisam de imagens.