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

Um repeating linear gradient em CSS repete um trecho curto de paradas de cor ao longo de uma linha até preencher o elemento. Escreva repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px) e você ganha listras diagonais rosa, cada uma com 14 pixels de largura, sem arquivo de imagem. O comprimento de uma repetição é definido pela última parada, aqui 28px. Use a mesma ideia com repeating-radial-gradient() para anéis e repeating-conic-gradient() para raios.

Como funciona o repeating-linear-gradient()

A sintaxe é idêntica à de um gradiente linear comum. A diferença está no que acontece depois da última parada: em vez de manter a cor final, o navegador recomeça o padrão. Duas regras fazem quase todo o trabalho.

• A posição da última parada é o comprimento do bloco. Paradas em 0, 14px e 28px se repetem a cada 28 pixels.
• Duas cores na mesma posição criam uma borda seca. #f472b6 0 14px, #fdf2f8 14px 28px salta do rosa para o rosa-claro em 14px, sem mistura.
• Cada parada aceita duas posições. #f472b6 0 14px significa rosa sólido de 0 a 14px, o que é mais curto do que escrever a cor duas vezes.
• Use comprimentos, não porcentagens, para listras. Porcentagens são relativas à linha do gradiente, então as listras 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 listras para copiar

O papel pautado é um bom exemplo de repetição assimétrica: 22 pixels de papel, um pixel de linha. O mesmo padrão com uma linha de margem vermelha por cima vira um caderno convincente. Mais ideias de padrões, incluindo grades e bolinhas, estão em padrões em CSS.

Gradientes repetidos ou background-size

Você também pode fazer listras com um linear-gradient() comum e background-size, que repete uma pequena imagem do gradiente. Os dois funcionam. Eles se comportam de forma diferente em ângulos.

Para qualquer coisa na diagonal, prefira primeiro a versão repetida. Para tabuleiros e grades, em que você precisa de duas direções ao mesmo tempo, 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 parada nunca pode ficar antes da anterior, então o navegador a empurra até onde a última cor terminou, o que cria uma borda seca 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 se repete para fora a partir de um centro, então as listras viram anéis. Mova o centro com at para criar ondulações que se espalham a partir de um canto. Como nos gradientes radiais, circle mantém os anéis redondos; a elipse padrão os estica até a caixa.

Raios com repeating-conic-gradient()

Gradientes cônicos giram em torno de um ponto, então suas paradas são ângulos. Escolha uma repetição que divida 360 por igual, como 20, 30 ou 45 graus, senão o último raio terá largura diferente dos outros. Mantenha as duas cores com luminosidade próxima num fundo; raios de alto contraste vibram na tela e roubam a atenção de todo o resto. A sintaxe completa está em gradientes cônicos em CSS.

Como corrigir bordas serrilhadas nas listras

Bordas secas em ângulo podem parecer em degraus, e em alguns níveis de zoom os navegadores as renderizam de forma desigual, então algumas listras parecem mais grossas que outras. A solução é dar a cada borda uma transição minúscula 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 estilo barbearia

Mover background-position exatamente uma repetição faz as listras andarem 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, veja gradientes animados em CSS, que trata de técnicas mais baratas. Listras e anéis são ótimos para detalhes, ingressos e estados de carregamento. Para um fundo que as pessoas reconheçam como seu, os Marks do Gradiently somam material, luz e granulação que um padrão repetido não tem, e renderizam em qualquer tamanho em que você criar.