Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de gradientes CSS

CSS Gradient Generator

Componha gradientes lineares ou radiais com ângulo, foco e paradas de cor explícitos e copie uma única declaração background.

Caminho da tarefa / da entrada ao resultado

Escolha o tipo de gradiente

Roda localmente · Nada é enviado

Como Gerador de gradientes CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como compor um gradiente em CSS

  1. 01

    Escolha o tipo de gradiente

    Abra Tipo de gradiente e escolha Linear para uma mescla reta ou Radial para uma circular. O selo da pré-visualização mostra o ângulo atual enquanto você trabalha.

  2. 02

    Defina a direção ou o foco

    Direção / foco vai de 0 a 360. Para um gradiente linear é o ângulo em graus; para um radial, posiciona o ponto de foco em um anel ao redor do centro. O selo acompanha o valor ao vivo, o que torna pequenas correções fáceis de avaliar.

  3. 03

    Escolha cores e paradas

    Defina a Cor inicial e a Cor final, depois posicione a Parada inicial (0–99%) e a Parada final (1–100%). O início deve vir antes do fim, ou o status muda para VERIFIQUE OS VALORES.

  4. 04

    Controle a faixa de transição

    A distância entre as duas paradas é a zona de transição: paradas a 1% de distância produzem uma borda quase dura para listras de dois tons, enquanto paradas em 0% e 100% — os padrões — dão a mescla mais suave em toda a largura. Olhe a pré-visualização, não os números.

  5. 05

    Copie a declaração

    Pressione Copiar CSS ou Baixar .css para salvar toolars-gradient.css. A regra .gradient é uma única declaração de background — linear-gradient(…deg, …) ou radial-gradient(circle at …, …) — correspondente exatamente às suas paradas.

  6. 06

    Aplique e estenda

    A declaração única se combina bem com suas próprias adições de background-size ou background-repeat. Precisa de uma terceira cor? Copie a regra e insira uma parada intermediária manualmente — as duas paradas que você ajustou ancoram as duas pontas da mescla. Por ser uma linha só, ela também cola bem em uma custom property se o seu design system guarda tokens assim.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de gradientes CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Gerador de gradientes CSS realmente faz

Uma faixa de destaque que esmaece do azul da marca para o turquesa, um brilho radial suave atrás de uma foto de produto, uma listra de dois tons com corte seco em uma tabela de preços — gradientes carregam mais interfaces do que qualquer recurso de imagem. O modo radial compensa em brilhos e vinhetas que uma mescla linear não consegue fingir. Compor um visualmente, com paradas explícitas em vez de adivinhação, leva segundos, e como o gerador roda nesta aba, os experimentos de paleta ficam privados até o design ser publicado. A declaração copiada não precisa de limpeza antes de entrar em uma folha de estilos.

Perguntas frequentes

Por que a pré-visualização diz VERIFIQUE OS VALORES?
Uma regra se aplica: a parada inicial deve vir antes da parada final. Paradas iguais ou invertidas tornam o gradiente ambíguo, então a mensagem indica a regra e copiar e baixar esperam até ela passar. Manter até 1% entre as paradas já é suficiente.
O que Direção / foco faz no modo radial?
Para um gradiente radial o ângulo não rotaciona nada — ele posiciona o foco do círculo em um anel a 25% do centro, então 0° empurra o foco para a direita e 180° para a esquerda. As coordenadas circle at X% Y% exportadas refletem isso exatamente.
Qual ângulo dá a direção que eu quero?
Ângulos lineares seguem a convenção CSS: 0deg mescla para cima, 90deg aponta para a direita, 180deg para baixo e 270deg para a esquerda. O padrão 135deg vai do canto superior esquerdo ao inferior direito, uma diagonal que favorece a maioria das faixas de destaque.
Como faço uma listra de corte seco?
A validação exige que a parada inicial venha antes da final, então posicione-as a 1% de distância — 49% e 50% para uma emenda centralizada. A faixa de transição colapsa para uma linha fina, que parece uma divisão nítida de dois tons em qualquer elemento.
Posso montar um gradiente de três cores?
O gerador trabalha com duas paradas explícitas por decisão de design — é o que os controles e a validação cobrem. Depois de copiar a declaração, adicionar uma parada intermediária manualmente é uma edição de uma linha.
Minhas cores são enviadas para algum lugar?
Não. Tudo é calculado na aba atual do navegador sem conta, e nenhum valor entra em armazenamento, registros ou análise. Pressione Redefinir para voltar à mescla linear padrão.

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar