Gerador de Gradiente CSS

Crie lindos gradientes CSS gratuitamente online. Crie gradientes lineares e radiais com múltiplas paradas de cor e copie o código CSS instantaneamente.

Preview
CSS Code

Como funciona

  1. Escolha o tipo de gradiente – linear ou radial – de acordo com as necessidades do seu design.
  2. Adicione paradas de cor clicando na barra deslizante e selecionando cores no seletor de cores.
  3. Ajuste o ângulo ou a direção do gradiente usando o controle de rotação.
  4. Visualize o resultado em tempo real na área de pré-visualização.
  5. Copie o código CSS gerado com um único clique e cole-o diretamente no seu projeto.

Exemplo

Entrada: Gradiente linear: de #F09819 (0%) a #EDDE5D (100%), ângulo 135°
Resultado: background: linear-gradient(135deg, #F09819 0%, #EDDE5D 100%);

FAQ

Sim, absolutamente. Todo o processamento ocorre diretamente no seu navegador, no lado do cliente. Nenhum dado é enviado para qualquer servidor, por isso o seu trabalho permanece completamente privado.

Sim, pode adicionar quantas paradas de cor quiser para criar gradientes complexos e multicoloridos com transições suaves entre cada parada.

O código gerado é compatível com todos os navegadores modernos. A ferramenta adiciona automaticamente os prefixos de fornecedor necessários para uma maior compatibilidade.

Não, o Gerador de Gradientes CSS é completamente gratuito e não requer qualquer registo ou inicio de sessão.

Um gradiente linear faz a transição de uma cor para outra ao longo de uma linha reta num ângulo definido, enquanto um gradiente radial irradia para o exterior a partir de um ponto central em forma circular.