# Padrões CSS com gradientes repetidos

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

As paragens de cor duras transformam gradientes em formas, e o background-size transforma formas em mosaicos. Com estas duas ideias desenhas a maioria dos padrões clássicos em poucas linhas, sem ficheiros de imagem.

## The short version

- Os padrões CSS desenham-se com gradientes que usam paragens de cor duras, por isso as cores mudam de imediato em vez de se misturarem.
- As funções repeating-linear-gradient, repeating-radial-gradient e repeating-conic-gradient repetem as suas paragens até preencher o elemento, o que desenha riscas, anéis e raios.
- O background-size transforma um único gradiente num mosaico, e é assim que se constroem grelhas de pontos, grelhas de linhas, xadrez e vichy.
- As posições das paragens escritas em píxeis mantêm as riscas nítidas e uniformes, enquanto as percentagens podem dar arestas irregulares e desfocadas.
- Os padrões por trá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 riscas, grelhas, pontos e xadrez, desenhados só com funções de gradiente. Duas ideias fazem-nos funcionar. As paragens de cor duras, em que duas paragens partilham a mesma posição, transformam um gradiente numa aresta nítida. A repetição, com as funções de gradiente `repeating-*` ou com o mosaico do `background-size`, transforma uma aresta num padrão. O resultado pesa poucos bytes, escala na perfeição e vai buscar as cores às tuas variáveis CSS.

- Riscas diagonais: `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`
- Risca fina: `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)`
- Risca de caramelo: `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 com um único gradiente repetido. Copia qualquer um diretamente para o `background`.

## Como as paragens duras criam formas

Um gradiente mistura as cores entre paragens vizinhas. Se a paragem seguinte começa exatamente onde a anterior acabou, não há distância para misturar, e a cor muda numa linha dura. O atalho para isto é uma cor com duas posições, como `#1e293b 0 10px`, que mantém essa cor sólida dos 0 aos 10 píxeis. O guia de [gradiente linear em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient) trata em pormenor as paragens, as dicas e as paragens 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 à aresta e ao padrão, em três passos.

## Riscas com repeating-linear-gradient

O `repeating-linear-gradient()` repete a sua lista de paragens ao longo da linha do gradiente até o elemento ficar cheio. O comprimento de uma repetição é a posição da última paragem, por isso `0 10px, 10px 20px` repete-se a cada 20 píxeis. Muda o ângulo para obter diagonais e muda a proporção entre as duas faixas para riscas finas ou riscas largas de toldo.

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

Receitas de riscas. A e B são as tuas duas cores; a última paragem define o comprimento da repetição.

> **Diagonais nítidas** As arestas duras em ângulo podem ficar serrilhadas. Deixar meio píxel entre paragens, como em `#1e293b 0 10px, #334155 10.5px 20px`, dá a cada aresta um fio de suavização e parece mais lisa.

## Grelhas, pontos e mosaicos com background-size

Alguns padrões não se desenham com um só gradiente repetido: uma grelha de pontos precisa de repetição em duas direções. A solução é desenhar um mosaico, como um ponto ou um canto de grelha, e depois definir o `background-size` com o tamanho desse mosaico. Os fundos repetem-se por defeito, por isso o mosaico 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 grelha de planta, uma grelha de pontos e um tabuleiro de xadrez. Cada um é um mosaico, repetido pelo `background-size`.

A grelha são dois gradientes: um desenha uma linha horizontal de 1px no topo de cada mosaico, o outro uma linha vertical na margem esquerda. Os pontos são um pequeno gradiente radial que fica transparente após 2 píxeis. O tabuleiro usa um [gradiente cónico](https://gradiently.design/pt-pt/guide/css-conic-gradient) dividido em quartos, e por isso precisa de uma só camada.

## Vichy, tartan e ziguezagues

Sobrepor riscas semitransparentes cria padrões tecidos: onde uma faixa horizontal e uma vertical se cruzam, as cores somam-se e o quadrado fica mais escuro. Isso é o vichy. Junta um segundo conjunto de riscas mais finas noutra cor e passa a ser tartan. Os ziguezagues nascem de quatro cantos triangulares, cada um desenhado com uma paragem dura a 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;
}
```

Vichy vermelho e um ziguezague azul-céu. No ziguezague, as duas primeiras camadas estão deslocadas meio mosaico para os triângulos encaixarem.

## Riscas em movimento para barras de progresso

As riscas diagonais animadas são a forma clássica de mostrar que algo ainda está a trabalhar. Desenha as riscas como um mosaico com `background-size` e depois move o `background-position` exatamente a largura de um mosaico. Como o fotograma final coincide com o inicial, o ciclo não tem salto visível. Usa-o em elementos pequenos e desativa-o para quem prefere [movimento reduzido](https://gradiently.design/pt-pt/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; }
}
```

Riscas que avançam numa barra de progresso. A distância da animação é igual à largura do mosaico, por isso o ciclo é contínuo.

## Tamanho, temas e escala dos padrões

Escreve as posições das paragens e os tamanhos dos mosaicos em píxeis ou `em`, não em percentagens. As percentagens dependem do tamanho do elemento, por isso as riscas esticam de forma desigual quando ele muda de tamanho e as arestas podem cair entre píxeis e ficar desfocadas. Com `em`, o padrão escala com o texto à volta, o que serve para emblemas e etiquetas com padrão.

As propriedades personalizadas tornam os padrões reutilizáveis. Define as cores e o tamanho uma vez e depois varia-os 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-pt/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 mudado através de três variáveis.

## Padrões por trás do texto

### Evita

- Riscas de alto contraste mesmo por trás do texto corrido
- Padrões finos que cintilam quando a página se desloca
- Padrões com a mesma cor do texto
- Vários padrões diferentes num só ecrã

### Faz

- Padrões de baixo contraste, dois tons próximos da mesma cor
- Mosaicos maiores e mais calmos em superfícies grandes
- Um painel sólido sob o texto que assenta num padrão carregado
- Um só padrão como acento reconhecível

Os padrões são um tipo de textura, e valem as mesmas regras: subtis ao ponto de se sentirem em vez de se lerem. O guia sobre [texturas de fundo](https://gradiently.design/pt-pt/guide/background-texture) trata do grão, do papel e do tecido; o de [texto sobre fundos carregados](https://gradiently.design/pt-pt/guide/type-on-busy-backgrounds) trata de manter as palavras legíveis por cima.

## FAQ

### Como faço riscas em CSS?

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

### Como faço um padrão de pontos em CSS?

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

### Como faço um tabuleiro de xadrez em CSS?

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

### Porque é que as minhas riscas CSS ficam desfocadas ou irregulares?

As posições em percentagem podem cair entre píxeis. Usa comprimentos em píxeis ou em em para as paragens e os tamanhos dos mosaicos, e deixa meio píxel entre paragens nas arestas diagonais.

### Os padrões de gradiente CSS são melhores do que os padrões em imagem?

Para padrões geométricos, normalmente sim: não precisam de transferência, mantêm-se nítidos em qualquer tamanho e podem ser recoloridos com variáveis CSS. As texturas orgânicas ou fotográficas continuam a precisar de imagens.