Gerador de gradientes CSS

Um gradiente CSS é uma transição suave entre duas ou mais cores, criada com linear-gradient(), radial-gradient() ou conic-gradient(). Aqui você o monta com as cores da sua paleta, escolhe o tipo e o ângulo e copia o código.

Atualizado em

Clique em um HEX para copiar · cadeado para fixar

Como usar

  1. Marque as cores da paleta que quer usar como paradas do gradiente.
  2. Escolha linear, radial ou cônico e ajuste o ângulo no controle deslizante.
  3. Copie o CSS. Ele inclui uma cor de reserva e uma classe para texto com gradiente.

Perguntas frequentes

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

O linear avança em linha reta conforme um ângulo. O radial se espalha a partir de um centro em círculo ou elipse. O cônico gira em torno de um ponto, como as fatias de um gráfico de pizza.

Gradientes CSS funcionam em todos os navegadores?

linear-gradient() e radial-gradient() funcionam em todos os navegadores atuais. conic-gradient() é suportado pelas versões modernas de Chrome, Edge, Firefox e Safari. A cor de reserva atende navegadores antigos.

Como aplico um gradiente em um texto?

Defina o gradiente como background, adicione background-clip: text (e -webkit-background-clip: text) e deixe a cor do texto como transparent. O código exportado já inclui essa classe.