Pular para o conteúdo
Toolars
Explorar

Gerador de gradientes CSS

CSS Gradient Generator

Gradientes lineares ou radiais com 2–16 pontos; adicione, remova, inverta ou sorteie cores.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

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–16 Pontos de cor · Linear / Radial · Adicionar / Remover / Inverter / Aleatório

  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

    Adicione 2–16 paradas de cor. As posições vão de 0% a 100%, sem diminuir; posições iguais criam uma borda nítida. Edite, remova, inverta ou aleatorize as paradas e confira a prévia.

  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

    Exporte o resultado atual. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

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?
0 ≤ stop[0] ≤ … ≤ stop[N] ≤ 100. Confira fonte, controles e validação antes de exportar. Um resultado inválido não pode ser exportado.
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?
Pontos de cor: position[i] = position[i+1]. Cor.
Posso montar um gradiente de três cores?
Pontos de cor: 2–16. Adicionar / Remover / Inverter / Aleatório.
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.

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

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

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar