Gerador de padrões CSS

Padrões de fundo CSS

Um padrão de fundo CSS é uma imagem em mosaico (riscas, pontos, grelhas, xadrez, triângulos) desenhada inteiramente com funções de gradiente CSS e sem ficheiro de imagem. Três propriedades fazem todo o trabalho: background-image pinta qualquer imagem de gradiente no elemento, background-size define o tamanho de um mosaico dessa imagem, e background-repeat (que por defeito é repeat) embeleza essa imagem em ambos os eixos. background-position desloca então a costura para que o mosaico de cada camada se alinhe com os outros. Um padrão é portanto apenas várias imagens de gradiente empilhadas umas sobre as outras, cada uma dimensionada para o mesmo mosaico, cada uma posicionada para encaixar. Os navegadores pintam os valores background-image separados por vírgulas de frente para trás, por isso a primeira imagem da lista fica em cima da segunda, a segunda em cima da terceira, e assim sucessivamente.

Todo o género existe graças a um truque sintáctico: as paragens de cor duras. Paragens de cor adjacentes na mesma posição produzem uma transição instantânea em vez de uma mistura. linear-gradient(red 50%, blue 50%) não é um esbatimento de vermelho para azul (é uma linha nítida. Sem paragens duras obtém-se um gradiente suave; com elas obtém-se geometria. Riscas, pontos, xadrez, triângulos, divisas) cada padrão que esta ferramenta emite é construído a partir dessa única propriedade, aplicada a diferentes ângulos e tamanhos de mosaico.

Uma breve história, Lea Verou e a Patterns Gallery

Se um único recurso é responsável por todo o género dos padrões de fundo em CSS puro, é a CSS3 Patterns Gallery de Lea Verou, originalmente alojada em lea.verou.me/css3patterns/. Verou tinha estado a publicar demos individuais ao longo de 2010 e princípios de 2011, incluindo um celebrado passeio pelo xadrez em Fevereiro de 2011, antes de anunciar a galeria propriamente dita a 15 de Abril de 2011 num post intitulado «CSS3 patterns gallery and a new pattern» (o novo padrão era um design de cubos japoneses que ela classificou como o mais difícil que alguma vez tinha feito). Poucos meses depois, a 1 de Dezembro de 2011, escreveu o ensaio canónico «CSS3 Patterns, Explained» para o calendário de Advento 24 ways, ainda a melhor explicação em linguagem clara da técnica de paragens de cor duras que sustenta cada risca, pintinha e padrão de xadrez. Em Junho de 2015 a O’Reilly publicou o seu livro CSS Secrets: Better Solutions to Everyday Web Design Problems, que expandiu o capítulo dos padrões para uma taxonomia completa. O impacto cultural mais amplo da galeria está documentado nas próprias notas de projecto de Verou: «iniciou a prática generalizada de usar paragens duras em gradientes CSS para criar facilmente padrões de fundo e outros gráficos» e foi mais tarde usada pelos engenheiros da Opera Software para afinar a sua implementação de gradientes.

Do prefixo de fornecedor à especificação

Os gradientes CSS estão definidos no CSS Image Values and Replaced Content Module Level 3 (comummente «CSS Images 3»), mantido pelo W3C CSS Working Group e editado por Tab Atkins Jr. e Elika J. Etemad entre outros. O First Public Working Draft é de 12 de Julho de 2011; a spec atingiu Candidate Recommendation em Abril de 2012, fixando a sintaxe moderna sem prefixo, incluindo a convenção de que 0deg aponta para cima e to right equivale a 90deg. Ordem de envio dos navegadores: o WebKit foi o primeiro com grande margem, com -webkit-gradient() utilizável no Safari 4 (2009); o Firefox enviou -moz-linear-gradient() no Firefox 3.6 (21 de Janeiro de 2010); o Internet Explorer 10 enviou as formas sem prefixo em 2012; a sintaxe sem prefixo estabilizou em todos os principais motores no final de 2013. conic-gradient() foi especificado no CSS Images Level 4 porque o Level 3 já tinha entrado em Last Call quando a sintaxe estava a ser desenhada; foi enviado no Chrome 69 (4 de Setembro de 2018), Safari 12.1 (25 de Março de 2019) e Firefox 83 (17 de Novembro de 2020). Em 2026 pode escrever-se background: linear-gradient(...) e background: conic-gradient(...) com confiança, sem prefixos nem fallbacks para qualquer navegador que mereça a pena suportar.

linear-gradient: ângulos e lados

A gramática formal é linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). A convenção de ângulo faz frequentemente tropeçar os programadores porque difere da convenção SVG/canvas. 0deg equivale a to top (a linha do gradiente aponta para cima, por isso a última cor aparece no topo da caixa). 90deg equivale a to right. 180deg equivale a to bottom (o por defeito se nenhuma direcção for dada). 270deg equivale a to left. Os ângulos crescentes rodam no sentido horário a partir do topo, o oposto da convenção matemática (onde 0 é à direita e os ângulos crescem no sentido anti-horário) e o oposto do <linearGradient> de SVG. Uma subtileza útil: to right e 90deg são equivalentes apenas em caixas quadradas. Numa caixa não quadrada, to top right produz uma linha de gradiente exactamente perpendicular à diagonal do canto inferior esquerdo (o que significa que o gradiente atinge o canto de forma limpa) enquanto 45deg é sempre literalmente 45 graus, independentemente do rácio de aspecto. Isto importa menos para padrões em mosaico (onde os mosaicos são geralmente quadrados) mas muito para fundos hero.

radial-gradient: formas, tamanhos e pintinhas

A gramática é radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Os dois valores de forma são circle e ellipse (por defeito ellipse). O tamanho pode ser uma de quatro palavras-chave de extensão (closest-side, closest-corner, farthest-side ou farthest-corner (o por defeito)) ou comprimentos/percentagens explícitos. Para padrões de pintinhas a receita canónica é radial-gradient(circle at center, #000 0 5px, transparent 5px) com background-size: 20px 20px: um círculo preto de 5 px no centro de cada mosaico de 20 px, com o resto transparente. Os pontos podem ser desviados com uma segunda camada a meio mosaico para produzir uma grelha hexagonal de pontos. Para riscas puras não precisa de dimensionar o mosaico manualmente: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) produz riscas diagonais preto-e-branco com 10 px de largura, repetindo-se em toda a caixa, sem necessitar de declaração background-size. Os gradientes repetitivos têm também contrapartes radial e conic, repeating-radial-gradient faz anéis concêntricos, repeating-conic-gradient faz cata-ventos.

conic-gradient: os gráficos de tarte e raios de sol que antes não conseguia construir

conic-gradient() roda as paragens de cor em torno de um centro em vez de ao longo de uma linha ou a partir de um centro. As paragens de cor são posicionadas em ângulos, não em comprimentos. A história intelectual é uma das mais interessantes histórias de CSS: Lea Verou redigiu uma proposta conical-gradient() já em 2011, muito antes de qualquer navegador a suportar, e Tab Atkins Jr. creditou o seu rascunho quando adicionou formalmente a função ao CSS Image Values Level 4. A implementação atrasou-se durante anos. Em Junho de 2015, Verou escreveu um polyfill (usando SVG e a sua biblioteca -prefix-free) e lançou-o em palco no CSSConf, intitulando o post «Conical gradients, today!» O envio nativo chegou no Chrome 69 (4 de Setembro de 2018), Safari 12.1 (25 de Março de 2019) e Firefox 83 (17 de Novembro de 2020). O que os gradientes cónicos desbloqueiam que linear e radial não conseguem: gráficos de tarte e donut sem canvas, SVG ou JS (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) mais border-radius: 50% é um gráfico de tarte completo); rodas de cores (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) produz a roda de matizes padrão); padrões de raios e estouros a partir de cores alternadas em paragens duras a pequenos intervalos angulares; molduras de gradiente e brilhos angulares de canto; e xadrez numa só declaração (repeating-conic-gradient(#000 0 25%, #fff 0 50%) mais background-size produz um xadrez com uma única camada de gradiente em vez de dois gradientes lineares empilhados).

Performance: quando os padrões CSS batem as imagens, e quando não

O argumento de performance para padrões em CSS puro é aquele que mais vale a pena perceber bem porque é demasiado simplificado em texto de marketing. Ganhos do CSS puro: sem pedido HTTP, sem descodificação, sem overhead PNG/JPEG/WebP (uma regra CSS de 4 linhas substitui um ficheiro binário; independente da resolução vectorial) um padrão tem aspecto idêntico a 1×, 2×, 3× device pixel ratio sem necessidade de enviar assets @2x e @3x, o que é a maior razão pela qual os design systems preferem padrões de gradiente a PNGs para ecrãs retina; trivialmente recoloráveis, alterar uma variável CSS actualiza todo o padrão; animáveis via background-position ou, com @property, via paragens de cor animáveis. Custos a conhecer: o custo de pintura escala com píxeis tocados e complexidade do gradiente, os gradientes estão entre as operações de pintura mais caras junto com grandes box-shadows, SVGs complexos e efeitos de texto pesados, e empilhar muitas camadas de gradiente num hero de viewport completo pode custar frames em GPUs de gama baixa. Animar as cores do gradiente desencadeia repaints completos por frame (isto está a mudar com as propriedades personalizadas registadas via @property no Chromium e Firefox, mas é ainda mais seguro animar background-position em vez disso). A heurística prática: se tiver um único padrão de viewport completo e não o estiver a animar, não notará nada. Se estiver a empilhar cinco camadas de gradiente em cada cartão de uma lista longa, faça profile.

Acessibilidade: contraste, decoração e movimento reduzido

Os padrões de fundo CSS são, por definição, decorativos. Não aparecem na árvore do documento nem na árvore de acessibilidade; do ponto de vista de uma tecnologia de assistência, simplesmente não existem. Isso é em grande parte uma característica, o tutorial WAI do W3C sobre imagens decorativas diz explicitamente que a imagística decorativa «deve ser fornecida usando imagens de fundo CSS em vez» de <img> para ser naturalmente ignorada pelos leitores de ecrã. Mas o contraste continua a aplicar-se a tudo o que coloque por cima do padrão. O critério de sucesso WCAG 2.1 1.4.3 exige um rácio de contraste de 4,5:1 para texto normal e 3:1 para texto grande. Os padrões tornam isto mais difícil porque a luminância local do fundo varia píxel a píxel. A técnica WCAG G18 trata isto directamente: se o fundo for padronizado, o fundo à volta das letras pode ser escolhido ou sombreado para que as letras mantenham um rácio de contraste de 4,5:1 com o fundo atrás delas, mesmo que não tenham esse rácio com todo o fundo. Na prática: se colocar texto por cima de um padrão, ou escolha cores de padrão com luminância semelhante entre si, ou coloque um cartão de cor sólida entre o texto e o padrão. WCAG 2.1 também exige contraste 3:1 para componentes UI não textuais e gráficos, o que pode aplicar-se a ícones e separadores baseados em padrões. Se o seu padrão estiver animado (uma risca em scroll, um cónico a rodar lentamente, um esqueleto shimmer) envolva a animação em @media (prefers-reduced-motion: no-preference). A motivação é médica, não estilística: as animações podem desencadear sintomas vestibulares (náuseas, tonturas), crises em utilizadores com epilepsia fotossensível e enxaquecas.

Padrões SVG vs gradientes CSS: uma comparação justa

O elemento <pattern> de SVG é o irmão espiritual dos gradientes CSS. Ambos permitem embelezar uma célula unitária por uma área de preenchimento. Têm sweet spots diferentes. Os padrões SVG ganham quando a unidade é uma forma complexa (uma folha, uma escama de peixe, um hexágono irregular) que os gradientes não conseguem expressar naturalmente; quando se quer enviar um asset criado por um designer (Hero Patterns de Steve Schoger, lançado a 27 de Setembro de 2016 sob CC BY 4.0, é a biblioteca canónica de padrões SVG); quando se precisa de geometria vectorial precisa para curvas nítidas que as paragens duras de gradiente só conseguem aproximar; ou quando se quer reutilizar o padrão em múltiplos elementos SVG via fill="url(#myPattern)". Os gradientes CSS ganham quando o padrão é geométrico, riscas, pontos, grelhas, xadrez, divisas, triângulos, qualquer coisa componível a partir de linhas rectas e círculos; quando se quer zero overhead HTTP; quando se precisa de personalização por instância via variáveis CSS (--stripe-color: red actualiza o padrão instantaneamente); quando se quer aplicar o padrão como fundo CSS a qualquer elemento HTML, não apenas dentro de um SVG; ou quando se quer animar o padrão sem elementos <animate>. Uma técnica híbrida comum é fazer inline de um SVG como URL data:image/svg+xml,... dentro de background-image: isto consegue o ganho «sem pedido HTTP extra» do CSS puro enquanto permite aos designers expressar formas arbitrárias. A desvantagem é o aborrecimento de codificação: # torna-se %23, as aspas duplas precisam de escape, e inspeccionar o SVG nas DevTools é desconfortável. Este gerador emite padrões de gradiente CSS puro; o trade-off é intencional, simplicidade e payload pequeno em vez de máxima flexibilidade de forma.

Onde os padrões CSS dão o seu valor

O género é mais amplo do que papel de parede. As utilizações reais em produção incluem:

• Fundos de secção hero. Padrões subtis em larga escala atrás do título da página (linhas diagonais, pontos grandes, um suave raio de sol conic-gradient) dão ao hero textura visual sem acrescentar peso de imagem.
• Placeholders de estado vazio. Quando uma lista não tem itens, um padrão de xadrez ou de grelha na área vazia comunica «isto está intencionalmente em branco» melhor que espaço em branco plano.
• Esqueletos de carregamento. O esqueleto «shimmer» clássico é um linear-gradient com branco semi-transparente a mover-se sobre um fundo cinza, animado via background-position. A técnica é agora um padrão de UX.
• Fundos de cartões e crachás. Uma ténue grelha de pontos atrás de um crachá «Pro» ou um pinstripe diagonal atrás de um cartão de feature acrescenta textura sem competir com o texto.
• Estados de erro e aviso. Riscas diagonais repetidas (o padrão cone de obras) sinalizam intuitivamente «zona de aviso». repeating-linear-gradient(45deg, #fbbf24 0 10px, #1f2937 10px 20px) é o overlay «atenção» universal.
• Estéticas retro e synthwave. A grelha Tron dos anos 80 (uma grelha magenta deformada em perspectiva a rolar para um horizonte) é um efeito em CSS puro construído a partir de um repeating-linear-gradient mais transform: perspective(...) rotateX(...).
• Divisores de secção. Uma curta banda de largura total de padrão entre secções quebra uma página longa sem acrescentar peso semântico.
• Perfurações amigas da impressão. As linhas de perfuração ponteadas/tracejadas para bilhetes e cupões imprimíveis são mais fáceis de criar com repeating-linear-gradient do que com SVG.
• Padrões modo claro/escuro. Os padrões trocam-se bem entre modo claro e escuro porque são guiados por variáveis CSS; uma declaração adapta-se a ambas as paletas.

Como usar

1. Escolha um tipo de padrão : selecione listras, pontos, xadrez, grade, zigue-zague, triângulos e muito mais, todos em CSS puro.
2. Personalize cores e escala : ajuste cores de primeiro plano e fundo, tamanho do padrão, ângulo e espaçamento com os controles deslizantes.
3. Pré-visualize em tempo real : o padrão é exibido em tempo real enquanto você altera as configurações.
4. Copie o CSS : copie a propriedade background gerada e cole-a na sua folha de estilo.

Perguntas frequentes

O CSS funcionará em navegadores mais antigos?

Cada navegador moderno principal envia linear-gradient, radial-gradient e as variantes repetitivas sem prefixo e activadas por defeito, a limpeza foi concluída no final de 2013. conic-gradient demorou mais (Chrome 69 em Setembro de 2018, Safari 12.1 em Março de 2019, Firefox 83 em Novembro de 2020) mas é também universal em 2026. O gerador não emite prefixos de fornecedor porque nenhum é necessário para qualquer navegador que valha a pena suportar. O Microsoft Edge abandonou o seu motor EdgeHTML em Janeiro de 2020 e o IE11 atingiu o fim de vida a 15 de Junho de 2022; ambos são agora notas de rodapé históricas para qualquer ferramenta nova.

Os padrões CSS são mais rápidos do que os fundos de imagem em mosaico?

Para padrões estáticos, sim, um padrão CSS elimina um pedido HTTP, uma passagem de descodificação e o envio de assets multi-resolução exigido para ecrãs retina. O padrão é também vectorialmente perfeito a qualquer zoom e trivialmente recolorável através de variáveis CSS. O trade-off é o custo de pintura: os gradientes estão entre as coisas mais caras que um navegador pode pintar, e empilhar muitas camadas de gradiente num hero de viewport completo pode custar frames em GPUs de gama mais baixa. Para um único padrão estático num cartão ou secção, não vai notar. Se se vir a empilhar cinco camadas de gradiente em cada item de uma lista longa, faça profile antes de publicar.

Como coloco texto por cima de um padrão de forma acessível?

WCAG 2.1 SC 1.4.3 exige contraste 4,5:1 para texto normal e 3:1 para texto grande em relação ao fundo. Com um fundo padronizado, a luminância local varia píxel a píxel, o que pode fazer falhar o contraste no pior caso mesmo que o contraste médio pareça bem. Duas estratégias seguras: escolher cores de padrão com luminância semelhante entre si (para que o contraste com o seu texto seja consistente em todo o mosaico), ou colocar um cartão de cor sólida entre o texto e o padrão. Colocar texto directamente sobre um padrão de alto contraste (p. ex. riscas preto-e-branco) é o caso onde verificadores de contraste e leitores humanos sofrem ambos.

Posso animar o padrão?

Sim. A animação mais barata é deslocar background-position com @keyframes: isto desencadeia uma actualização apenas de compositor na maioria dos navegadores e pode correr suavemente a 60 fps. Animar as cores do gradiente em si é mais caro porque cada frame desencadeia uma pintura completa; o Chromium e o Firefox modernos podem mitigar isto com propriedades personalizadas registadas por @property, mas background-position é o por defeito mais seguro. Envolva sempre a animação em @media (prefers-reduced-motion: no-preference): fundos animados podem desencadear sintomas vestibulares, crises e enxaquecas para utilizadores sensíveis.

Porque é que o meu padrão parece desfocado em ecrãs retina?

Não devia, esse é precisamente o objectivo de usar gradientes em vez de imagens bitmap. Se o seu estiver, verifique se as paragens de cor estão em percentagens nítidas (uma paragem dura são duas paragens na mesma posição; um pequeno intervalo mesmo de 50% 50.1% introduz uma banda de desfoque visível) e que o dimensionamento do mosaico está em px em vez de em ou %, que podem interagir de forma imprevisível com a escala de texto. Os gradientes cónicos em versões antigas do Safari renderizavam o centro como uma área ligeiramente desfocada; o Safari e o Chrome modernos rasterizam ambos no GPU e o problema desapareceu em grande parte.

Os meus dados são enviados para algum lugar?

Não. A selecção de padrão, a escolha de cores, o dimensionamento e a geração de CSS correm todos no seu navegador. Não há pedidos de saída quando usa os controlos, pode verificar no separador Network das DevTools. O CSS gerado é seu para colar onde quiser.

Ferramentas relacionadas