Saltar para o conteúdo

Gerador de degradês CSS

Crie degradês lineares, radiais ou cônicos com pré-visualização ao vivo, ajuste cores e paradas e copie o código CSS ou Tailwind pronto para colar.

Tipo de degradê

Ângulo

90°

Paradas de cor (2)

  • #2C71DE
  • #051938

Clique para adicionar · Arraste para mover

background: linear-gradient(90deg, #2C71DE 0%, #051938 100%);

Degradês CSS prontos para usar

Clique em um para carregá-lo no editor e ajustá-lo como quiser.

O que é um degradê CSS e como funciona

Um degradê (ou gradiente) é uma transição suave entre duas ou mais cores, usada como fundo através da propriedade background do CSS. Em vez de uma cor sólida, o navegador desenha uma mistura progressiva entre as cores que você definir, na direção ou forma escolhida.

Cada cor do degradê é definida por uma parada de cor: o código da cor e o ponto, em porcentagem, onde essa cor fica totalmente pura. Entre duas paradas, o navegador calcula a transição automaticamente. Você pode usar só duas paradas para uma mistura simples ou adicionar várias para um degradê com mais nuances.

Linear

As cores fazem a transição em linha reta, no ângulo que você definir. É o tipo mais comum, ideal para fundos com uma direção clara, de cima para baixo ou na diagonal.

linear-gradient(90deg, #F97316, #FBBF24)

Radial

As cores se expandem em círculo a partir de um ponto central. Funciona bem para efeitos de foco, luz ou profundidade.

radial-gradient(circle, #FDE68A, #F97316 70%)

Cônico

As cores giram em torno de um ponto central, como os ponteiros de um relógio. É o tipo menos comum, útil para rodas de cor, indicadores de progresso ou efeitos mais experimentais.

conic-gradient(from 90deg, #F97316, #FBBF24, #14B8A6, #F97316)

Como se escreve um degradê em CSS

Um degradê linear é declarado com a função linear-gradient() dentro da propriedade background. Estas são as suas partes:

135deg
A direção. 0deg vai para cima, 90deg para a direita e 180deg para baixo. Também pode escrever to right ou to bottom right.
#FF5F6D
Cada cor do degradê, em qualquer formato CSS: HEX, rgb(), hsl() ou oklch().
0%
A posição da parada: onde essa cor é pura. Se omitir, o navegador distribui as cores igualmente.

Os radiais usam radial-gradient(circle, …) e os cônicos conic-gradient(from 90deg, …), com as mesmas paradas de cor.

background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);

Como usar o gerador

  1. Escolha o tipo

    Linear, radial ou cônico. Nos lineares e cônicos, ajuste o ângulo com o controle deslizante ou com os botões de direção.

  2. Ajuste cores e paradas

    Selecione uma parada para mudar a cor, arraste-a na barra para movê-la ou clique na barra para adicionar outra. Até oito paradas.

  3. Copie o código

    Copie o CSS ou o equivalente em classes do Tailwind e cole no seu projeto. Também pode exportar as cores soltas.

Dicas para degradês bonitos

  • Cores próximas no círculo

    Cores vizinhas no círculo cromático criam transições suaves e naturais.

  • Evite a zona cinza

    Entre duas cores opostas, o centro costuma ficar apagado. Adicione uma parada intermediária mais viva para evitar isso.

  • Poucas paradas

    Duas ou três cores bastam na maioria dos fundos. Mais paradas costumam tirar a elegância.

  • Texto legível por cima

    Verifique o contraste do texto com a cor mais clara e com a mais escura do degradê.

Perguntas frequentes

Use a propriedade background com a função linear-gradient(), radial-gradient() ou conic-gradient(), indicando a direção e as cores. Por exemplo: background: linear-gradient(90deg, #2193B0, #6DD5ED);

É cada uma das cores que formam o degradê, junto com o ponto (em porcentagem) onde essa cor aparece pura. Entre duas paradas, o navegador calcula a transição automaticamente.

O linear faz a transição em linha reta segundo um ângulo. O radial se expande em círculo a partir de um ponto central. O cônico gira em torno de um ponto central, como os ponteiros de um relógio.

Quantas precisar, clicando na barra de pré-visualização. Com duas paradas você obtém uma transição simples; com mais, pode criar degradês com vários tons.

Sim. Além do código CSS padrão, o gerador oferece o equivalente na sintaxe do Tailwind, pronto para copiar.

Sim, linear-gradient, radial-gradient e conic-gradient são propriedades CSS padrão, compatíveis com todos os navegadores modernos.

Aplique o degradê ao body e dê a ele pelo menos a altura da janela: body { min-height: 100vh; background: linear-gradient(180deg, #EE9CA7, #FFDDE1); }

Não dá para animar diretamente a troca entre dois degradês, mas dá para movê-lo: defina um background-size maior que o elemento (por exemplo 200%) e anime background-position com uma transição ou @keyframes.

Ferramentas relacionadas