Gerador de Gradiente CSS

Crie gradientes CSS lineares e radiais visualmente. Prévia ao vivo, copie o código CSS com um clique.

Tipo
90°

Pontos de cor

Código CSS

Como usar o gerador de gradiente CSS

  1. Escolha o tipo Linear ou Radial.
  2. Para gradientes lineares, arraste o controlo Direção para definir o ângulo.
  3. Escolha cores para cada ponto. Clique em + Adicionar ponto para adicionar mais. A prévia e o CSS atualizam-se instantaneamente.
  4. Clique em Copiar para copiar a propriedade CSS background pronta a usar.

Sintaxe de gradientes CSS

Os gradientes lineares usam linear-gradient(ângulo, cor1, cor2, ...). O ângulo pode ser em graus (90deg) ou como palavra-chave (to right). Os gradientes radiais usam radial-gradient(forma, cor1, cor2, ...). Ambos aceitam qualquer número de pontos de cor com posições opcionais (ex. red 20%, blue 80%).