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

Um repeating linear gradient em CSS repete uma sequência curta de paragens de cor ao longo de uma linha até preencher o elemento. Escreve repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px) e ficas com riscas rosa na diagonal, de 14 píxeis cada, sem ficheiro de imagem. O comprimento de cada repetição é definido pela última paragem, aqui 28px. Usa a mesma ideia com repeating-radial-gradient() para anéis e com repeating-conic-gradient() para raios.

Como funciona o repeating-linear-gradient()

A sintaxe é igual à de um gradiente linear normal. A diferença está no que acontece depois da última paragem: em vez de manter a cor final, o browser recomeça o padrão. Duas regras fazem quase todo o trabalho.

• A posição da última paragem é o comprimento do mosaico. Paragens em 0, 14px e 28px repetem-se a cada 28 píxeis.
• Duas cores na mesma posição fazem uma aresta dura. #f472b6 0 14px, #fdf2f8 14px 28px salta de rosa para rosa-claro aos 14px sem mistura.
• Cada paragem pode ter duas posições. #f472b6 0 14px quer dizer rosa sólido de 0 a 14px, o que é mais curto do que escrever a cor duas vezes.
• Usa comprimentos, não percentagens, para riscas. As percentagens são relativas à linha do gradiente, por isso as riscas esticam quando o elemento muda de tamanho.

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

Padrões de riscas para copiar

O papel pautado é um bom exemplo de uma repetição assimétrica: 22 píxeis de papel, um píxel de linha. O mesmo padrão com uma linha de margem vermelha por cima faz um caderno convincente. Há mais ideias de padrões, incluindo grelhas e pontos, em padrões CSS.

Gradientes repetidos ou background-size

Também podes fazer riscas com um linear-gradient() normal e background-size, que repete uma pequena imagem do gradiente. Ambos funcionam. Comportam-se de forma diferente em ângulo.

Para tudo o que seja diagonal, usa primeiro a versão repetida. Para tabuleiros de xadrez e grelhas, onde precisas de duas direções ao mesmo tempo, o background-size com gradientes em camadas é mais simples.

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

A segunda cor do tabuleiro começa na posição 0. Uma paragem nunca pode ficar antes da anterior, por isso o browser sobe-a até onde a última cor terminou, o que faz uma aresta dura 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 repete-se para fora a partir de um centro, por isso as riscas passam a anéis. Move o centro com at para fazer ondulações que se espalham a partir de um canto. Tal como nos gradientes radiais, circle mantém os anéis redondos; a elipse por defeito estica-os à caixa.

Raios com repeating-conic-gradient()

Os gradientes cónicos giram à volta de um ponto, por isso as suas paragens são ângulos. Escolhe uma repetição que divida 360 em partes iguais, como 20, 30 ou 45 graus, ou o último raio terá uma largura diferente dos outros. Mantém as duas cores próximas em valor num fundo; raios de alto contraste vibram no ecrã e roubam atenção a tudo o resto. A sintaxe completa está em gradientes cónicos em CSS.

Como corrigir arestas de riscas serrilhadas

As arestas duras em ângulo podem parecer em degraus e, a certos níveis de zoom, os browsers desenham-nas de forma irregular, por isso algumas riscas parecem mais grossas do que outras. A solução é dar a cada aresta uma pequena transição em vez de um salto perfeito.

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

Uma barra de progresso animada tipo poste de barbeiro

Mover o background-position exatamente uma repetição faz as riscas viajar 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.

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

Para fundos animados maiores, vê gradientes CSS animados, que trata de técnicas mais baratas. Riscas e anéis são ótimos para detalhes, bilhetes e estados de carregamento. Para um fundo que as pessoas reconheçam como teu, os Marks do Gradiently acrescentam material, luz e grão que um padrão repetido não consegue, e desenham-se em todos os tamanhos em que fizeres design.