Padrões CSS com gradientes repetidos

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.

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 trata em detalhe de paradas, dicas e paradas 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);

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.

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.

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

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

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.

.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

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.

.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 atrás de texto

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