Generated CSS
Padrões de fundo CSS são texturas visuais repetitivas criadas inteiramente através de funções de gradiente CSS — sem arquivos de imagem, sem JavaScript e sem dependências externas. O mecanismo subjacente é a capacidade do navegador de renderizar gradientes CSS como imagens de fundo e ladrilhá-los infinitamente usando background-size para controlar as dimensões do ladrilho.
Toda a base do trabalho com padrões CSS repousa em uma única característica: a parada de cor dura. Um gradiente normal faz transição suave entre cores. Uma parada dura coloca duas paradas de cor na exatamente mesma posição, causando um salto de cor instantâneo sem transição. A sintaxe blue 50%, red 50% significa "ser azul até exatamente 50% do comprimento do gradiente, então imediatamente ser vermelho".
Cada padrão CSS tem um background-size que define as dimensões do ladrilho. Isso é o que você ajusta para tornar um padrão mais grosso ou mais fino. Uma grade de pontos com background-size: 24px 24px coloca um ponto a cada 24 pixels em ambas as direções.
CSS permite múltiplos valores para background-image, background-size e background-position, separados por vírgulas. Cada entrada cria sua própria camada, desenhada de cima para baixo. É assim que padrões complexos como a grade de planta baixa são construídos.
A função repeating-linear-gradient() ladrilha seu gradiente automaticamente, poupando você de calcular background-size por conta própria. Ela repete o gradiente da primeira parada dura até a última, usando essa distância como tamanho do ladrilho.
Padrões diagonais precisam de consideração especial para ladrilhamento sem costuras. Quando você rotaciona um padrão de listras 45 graus, o ladrilho deve ser dimensionado para que as extremidades das listras se alinhem perfeitamente na fronteira do ladrilho. A função repeating-linear-gradient() lida com isso automaticamente.
Padrões CSS se tornam dinâmicos quando você anima seu background-position. Como os padrões se ladrilham infinitamente em todas as direções, mover a posição do fundo cria a ilusão de movimento contínuo. Um padrão de listras em movimento é uma única animação CSS que move background-position de 0 até o tamanho do ladrilho.
A propriedade background-blend-mode permite que você misture múltiplas camadas de fundo usando modos de mistura estilo Photoshop — multiplicar, tela, sobreposição, luz forte e mais. Isso abre uma enorme gama de efeitos de padrão impossíveis com simples empilhamento.
Padrões de fundo são mais eficazes quando aplicados a elementos de fundo grandes — seções hero, fundos de cards, sobreposições de modal ou fundos de página inteira. Em elementos pequenos, um padrão denso se torna ruído visual. A decisão de design chave é a opacidade — a maioria dos padrões de produção usa cores rgba a 10–30% de opacidade.
Padrões de gradiente CSS são renderizados pelo motor de pintura do navegador e armazenados em cache como ladrilhos de bitmap. Uma vez que o ladrilho inicial é calculado e armazenado em cache, repeti-lo pelo elemento custa quase nada. No entanto, padrões complexos com muitas paradas de gradiente podem aumentar o tempo de pintura inicial.
Padrões de gradiente linear e radial funcionam em todos os navegadores modernos sem prefixos. A função conic-gradient() usada para o tabuleiro de xadrez atingiu suporte total no Chrome 69, Firefox 83 e Safari 12.1.
Um padrão ladrilha sem costuras quando a saída visual do gradiente na borda direita corresponde exatamente à borda esquerda, e a borda superior corresponde à borda inferior. Paradas de cor duras são essenciais — transições de gradiente suave nas fronteiras do ladrilho criam costuras visíveis.
Sim, e funcionam bem quando usados sutilmente. Aplique o CSS do padrão diretamente ao elemento do card. Use border-radius e overflow: hidden para conter o padrão dentro da forma do card. Mantenha a opacidade baixa — 10 a 25% geralmente é suficiente para adicionar textura.
Ajuste a propriedade background-size. Valores maiores tornam o padrão mais grosseiro; valores menores o tornam mais fino.
Padrões diagonais com background-size explícito precisam que as dimensões do ladrilho correspondam ao período diagonal. Para listras a 45 graus, um período de N pixels requer um ladrilho de N × √2 ≈ 1.414 × N pixels. Usar repeating-linear-gradient() evita esse cálculo.