Ir para o conteúdo
Tutoriais Sem Enrolação
Cores

Gerador de Gradiente CSS Online

Crie gradientes CSS lineares, radiais ou cônicos com até 12 cores. Ajuste ângulo, transparência e pontos de transição, veja a prévia e copie ou baixe o código.

5,0 de 5 · 1 avaliação
Prévia de gradientes CSS linear, radial e cônico com controles de cores e código CSS.

Usar a ferramenta

Como criar um gradiente CSS

Escolha entre Linear, Radial e Cônico, selecione as cores e ajuste a posição dos pontos de transição. A prévia mostra o resultado enquanto você altera os controles. Quando terminar, use Copiar CSS para levar a declaração completa ao seu projeto ou Baixar .css para salvar uma classe de exemplo.

  1. Selecione o tipo de gradiente.
  2. Ajuste direção, formato ou centro, conforme o tipo escolhido.
  3. Edite até 12 cores, transparência e posições de 0% a 100%.
  4. Confira o resultado como fundo, botão ou card e copie o código.

Diferenças entre os tipos

Linear: as cores avançam em uma direção indicada em graus. É útil para fundos, faixas e botões. Exemplo: linear-gradient(90deg, #01C4FE 0%, #FD3530 100%).

Radial: as cores se espalham a partir de um centro. Você pode usar círculo ou elipse e escolher até onde o efeito se estende.

Cônico: as transições giram ao redor de um ponto central. É uma opção para setores coloridos, discos e efeitos circulares.

O controle de opacidade permite criar trechos parcialmente transparentes. Se quiser escolher combinações antes de começar, use o Gerador de Paleta de Cores. Para converter valores entre formatos, consulte o Conversor de Cores HEX, RGB, HSL e CMYK.

Como usar o código

O botão Copiar CSS produz uma declaração como background: linear-gradient(135deg, #01C4FE 0%, #FD3530 100%);. Cole-a na regra CSS do elemento desejado. Copiar valor remove a propriedade background:, o que ajuda ao preencher propriedades já existentes em um editor visual.

O arquivo baixado contém a classe .meu-gradiente com a declaração atual. Você pode renomear a classe e ajustar o restante dos estilos no seu site.

Privacidade e compatibilidade

A geração do gradiente acontece no navegador, sem enviar as cores a um servidor. Quando disponível, o armazenamento local conserva as últimas configurações; use Restaurar padrões para apagá-las e voltar ao exemplo inicial.

Os gradientes lineares, radiais e cônicos dependem de suporte às funções CSS correspondentes. Navegadores antigos podem não reconhecer gradientes cônicos. A aparência também pode variar um pouco conforme a tela e a renderização do navegador.

Perguntas frequentes

Como criar um gradiente CSS com três ou mais cores?

Clique em “Adicionar cor” para incluir um ponto. Escolha a cor em HEX e altere “Pos. %” ou arraste o marcador. Você pode combinar de 2 a 12 cores.

Qual a diferença entre gradiente linear, radial e cônico?

O linear muda as cores ao longo de uma direção; o radial se espalha a partir de um ponto; o cônico distribui as transições ao redor de um centro, conforme um ângulo inicial.

Posso ajustar a transparência de cada cor?

Sim. Use o campo “Opac. %” de cada cor, de 0 a 100. Quando a opacidade fica abaixo de 100%, o CSS utiliza rgba() para representar a transparência.

Onde colocar o CSS copiado?

Cole a declaração background na regra CSS do elemento que receberá o gradiente. O botão “Baixar .css” gera um arquivo com a classe .meu-gradiente como ponto de partida.

O gerador funciona sem instalar programas?

Sim. A edição e a geração do código são feitas no navegador. Não é necessário instalar programas nem enviar suas cores ao servidor.

As configurações ficam salvas?

Quando o navegador permite usar armazenamento local, a ferramenta conserva o último gradiente configurado. O botão “Restaurar padrões” apaga essas preferências e retorna ao exemplo inicial.

O gradiente cônico funciona em qualquer navegador?

Não. Navegadores mais antigos podem não oferecer suporte à função conic-gradient(). Para projetos que exigem compatibilidade com versões antigas, teste o CSS no ambiente de destino.

Ferramentas relacionadas

Outras ferramentas publicadas do catálogo com tema ou categoria relacionados.