Padrões CSS com gradientes repetidos

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.

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 trata em pormenor as paragens, as dicas e as paragens duras.

/* 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);

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.

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.

.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;
}

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 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.

.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;
}

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.

.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; }
}

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.

.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;
}

Padrões por trás do texto

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 trata do grão, do papel e do tecido; o de texto sobre fundos carregados trata de manter as palavras legíveis por cima.