Gerador de Gradientes Repetidos
Crie padrões CSS repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient() - instantaneamente e grátis. Escolha entre 6 estilos de padrão integrados (Listras, Zigue-zague, Xadrez, Bolinhas, Losangos ou Personalizado), selecione duas cores, ajuste o tamanho do padrão e o deslocamento do mosaico, e obtenha CSS pronto para produção com um clique. Totalmente privado e sem cadastro.
Pattern Style
Color 1
#6366f1
Color 2
#6366f1
Gradient Type
Pattern Size
Spacing & Offset
Tile Preview (3× tiles)
background: repeating-linear-gradient(to right, #6366f1 0%, #6366f1 40%, #ec4899 40%, #ec4899 100%);
Por Que Usar Nosso Gerador de Gradientes Repetidos?
- 6 estilos de padrão integrados: escolha entre Listras, Zigue-zague, Xadrez, Bolinhas, Losangos ou padrões Personalizados. Cada estilo configura automaticamente as posições ideais das paradas de cor e o tipo de gradiente - ou mude para o modo Personalizado para controle manual total.
- Pré-visualização em mosaico ao vivo e CSS instantâneo: o gerador de gradientes repetidos atualiza a pré-visualização ao vivo e a saída CSS a cada alteração. Veja exatamente como seu padrão se repete pela área de pré-visualização e copie CSS pronto para produção com um clique.
- 100 % privado - sem upload: toda a geração de gradientes acontece localmente no seu navegador. Suas cores e padrões nunca saem do dispositivo e nunca são enviados a servidor algum. Seguro para projetos de clientes e design systems proprietários.
- Grátis e sem limites: gere gradientes repetidos ilimitados sem cadastro, sem assinatura e sem limite de uso. O gerador de gradientes repetidos é totalmente gratuito para sempre, sem anúncios bloqueando a interface.
Casos de Uso Comuns de Gradientes Repetidos
- Padrões de fundo para sites: designers web usam o gerador de gradientes repetidos para criar padrões de fundo sem emendas para seções hero, blocos de conteúdo e divisores de página. Gradientes repetidos carregam mais rápido que arquivos de imagem e escalam perfeitamente em qualquer resolução.
- Tabelas e listas listradas em CSS: desenvolvedores front-end usam repeating-linear-gradient para criar linhas de tabela zebradas, fundos de lista alternados e padrões de linha do tempo. Copie o CSS diretamente na sua folha de estilos com um clique.
- Tokens de padrão para design systems: equipes de design system usam o gerador de gradientes repetidos para definir tokens de padrão para fundos decorativos, estados de carregamento e elementos de placeholder. O construtor visual facilita alinhar padrões com as cores da marca.
- Gráficos para redes sociais e marketing: profissionais de marketing e criadores de conteúdo usam o gerador de gradientes repetidos para criar fundos com padrões marcantes para posts em redes sociais, infográficos e cabeçalhos de e-mail. A biblioteca de predefinições oferece pontos de partida instantâneos.
- Elementos decorativos de interface: desenvolvedores de UI usam gradientes repetidos para barras de progresso, spinners de carregamento, bordas decorativas e texturas de fundo. Gradientes repetidos radiais e cônicos adicionam efeitos visuais únicos aos componentes de interface.
- Design de landing pages e CTA: otimizadores de conversão usam o gerador de gradientes repetidos para criar fundos de CTA e divisores de seção que chamam a atenção e destacam as páginas, mantendo tempos de carregamento rápidos e sem requisições de imagens.
O Que É um Gradiente CSS Repetido?
Um gradiente CSS repetido é um gradiente que mosaica ou repete seu padrão por todo o elemento usando as funções repeating-linear-gradient(), repeating-radial-gradient() ou repeating-conic-gradient(). Diferente dos gradientes comuns que se esticam por todo o elemento, os gradientes repetidos criam padrões repetindo a sequência de paradas de cor. Nosso gerador de gradientes repetidos constrói visualmente padrões repetidos sem emendas e gera CSS pronto para produção.
Como Funciona Nosso Gerador de Gradientes Repetidos
- Escolha um estilo de padrão: selecione entre 6 estilos de padrão integrados (Listras, Zigue-zague, Xadrez, Bolinhas, Losangos ou Personalizado) ou comece do zero com o modo Personalizado para controlar cada parada de cor.
- Configure cores e tamanho do padrão: escolha duas cores com os seletores de cor, ajuste o tamanho do padrão (comprimento de repetição) e defina espaçamento e deslocamento do mosaico. A pré-visualização ao vivo é atualizada instantaneamente - sem botão para pressionar.
- Copie o CSS: clique em «Copiar CSS» para copiar a declaração background: pronta para produção na sua área de transferência. Cole diretamente na sua folha de estilos.
Gradientes Repetidos vs Não Repetidos
- Gradientes comuns se esticam de uma borda do elemento à outra. As paradas de cor definem toda a transição e o gradiente preenche o elemento exatamente uma vez, independentemente do tamanho do elemento.
- Gradientes repetidos mosaicam o padrão de paradas de cor por todo o elemento. O tamanho do padrão é determinado pelas posições das paradas de cor - a posição da última parada define o comprimento do padrão. Gradientes repetidos são ideais para criar fundos listrados, padrões de xadrez e texturas sem emendas sem arquivos de imagem.
- Desempenho: gradientes CSS repetidos são renderizados pelo navegador e não exigem nenhuma requisição de rede, tornando-os muito mais rápidos que padrões baseados em imagens. Escalam infinitamente sem pixelização e funcionam em qualquer resolução.
Tamanho do Padrão, Espaçamento e Deslocamento do Mosaico
O controle de Tamanho do Padrão define o comprimento de um ciclo completo do padrão como porcentagem do contêiner. Um valor menor cria mais repetições. A opção Espaçamento insere separação entre os mosaicos do padrão para um visual mais definido. O Deslocamento do Mosaico desloca os mosaicos seguintes horizontal ou verticalmente, criando efeitos escalonados como paredes de tijolos ou xadrez deslocado. Esses controles dão total liberdade para adaptar o padrão repetido aos seus requisitos exatos de design.
Perguntas frequentes
Um gradiente CSS repetido é um gradiente que repete seu padrão de paradas de cor por todo um elemento usando as funções repeating-linear-gradient(), repeating-radial-gradient() ou repeating-conic-gradient(). Diferente dos gradientes comuns que se esticam uma vez por todo o elemento, os gradientes repetidos criam padrões sem emendas, como papel de parede ou azulejo. São definidos totalmente em CSS, não exigem arquivos de imagem e escalam infinitamente sem pixelização.
Um gradiente comum não repetido estica suas paradas de cor por todo o elemento de borda a borda. Um gradiente repetido mosaica o padrão definido pelas paradas de cor. A diferença principal é que gradientes repetidos usam as posições das paradas de cor para determinar o tamanho do padrão - a posição da última parada define o tamanho de um mosaico. Tudo além dessa posição se repete desde o início. Isso torna os gradientes repetidos perfeitos para listras, xadrez e outros padrões em mosaico.
O gerador de gradientes repetidos oferece 6 estilos de padrão: Listras (listras sólidas alternadas em qualquer direção), Zigue-zague (padrão de onda em zigue-zague), Xadrez (quadrados alternados), Bolinhas (pontos radiais repetidos), Losangos (padrão de losangos) e Personalizado (controle manual total de todas as paradas de cor e tipos de gradiente). Cada estilo configura automaticamente as posições ideais das paradas de cor e o tipo de gradiente, mas você pode sempre mudar para Personalizado para controle completo.
O controle de Tamanho do Padrão define o tamanho de um ciclo completo do padrão em relação ao contêiner. Um percentual menor cria mais repetições na mesma área (padrão mais fino), enquanto um percentual maior cria menos repetições, porém maiores (padrão mais grosso). Por exemplo, em 25 % você veria 4 repetições no contêiner, em 50 % veria 2 repetições, e em 100 % veria exatamente 1 ciclo completo do padrão.
Sim. Toda a geração de gradientes acontece 100 % no lado do cliente, no seu navegador, usando JavaScript. Suas escolhas de cor e configurações de padrão nunca são enviadas a servidor algum, nunca são armazenadas e nunca são transmitidas. O gerador de gradientes repetidos é totalmente privado e seguro para projetos de clientes.
Sim. Copie o valor do gradiente (a parte dentro da declaração background:, sem «background:») e use em uma classe de valor arbitrário do Tailwind: bg-[repeating-linear-gradient(to_right,#6366f1_0,#6366f1_40px,#ec4899_40px,#ec4899_80px)]. Substitua os espaços por sublinhados nos valores arbitrários do Tailwind. Como alternativa, adicione o gradiente ao seu tailwind.config.js em theme.extend.backgroundImage para reutilizá-lo em todo o projeto.
Gradientes lineares e radiais repetidos são suportados em todos os navegadores modernos sem prefixos de fornecedor. Gradientes cônicos repetidos são suportados no Chrome 69+, Firefox 83+, Safari 12.1+ e Edge 79+. Para navegadores mais antigos (IE11 e anteriores), considere fornecer uma cor sólida de fallback antes da declaração do gradiente.
Sim. O gerador de gradientes repetidos é 100 % gratuito, sem cadastro, sem recursos premium e sem limites de uso. Gere gradientes repetidos ilimitados sem restrições ou custos ocultos.