Gerador de gradiente CSS

Este gerador de gradientes CSS cria gradientes lineares e radiais a partir dos pontos de cor que controla, com uma pré-visualização em direto e uma declaração de fundo pronta a colar. Arraste os pontos ao longo da barra, defina o ângulo ou a forma e o CSS é atualizado imediatamente.

Tudo funciona no seu navegador com as cores e definições que escolher, por isso nada é enviado. Pode copiar o resultado e utilizá-lo offline.

Um gradiente linear mistura cores ao longo de uma linha reta e o ângulo define a sua direção: 0 graus aponta para cima, 90 graus aponta para a direita, 180 graus aponta para baixo. Um gradiente radial mistura-se a partir do centro, como um círculo ou uma elipse.

Ambos são valores CSS padrão, escritos como linear-gradient() e radial-gradient(), e utilizam a mesma lista de pontos de cor. Mudar o tipo mantém as cores e altera apenas a forma como se distribuem.

Cada ponto de cor é uma cor colocada numa posição entre 0% e 100%. O gradiente mistura suavemente os pontos vizinhos, por isso a posição de um ponto controla onde a cor é mais intensa e a rapidez com que passa para a seguinte.

Adicione os pontos necessários para criar gradientes multicolores, arraste-os para ajustar a mistura ou clique na barra para inserir um novo ponto onde quiser. Um gradiente necessita de pelo menos dois pontos.

Copie o código gerado e cole-o como fundo de qualquer elemento, como uma secção, cartão ou botão. Os navegadores modernos suportam linear-gradient() e radial-gradient() sem prefixos de fornecedor, pelo que o valor funciona tal como está.

Como um gradiente é apenas um valor, também pode utilizá-lo em qualquer lugar que se espere uma imagem de fundo, colocá-lo em camadas sobre uma cor sólida como alternativa ou reutilizar as mesmas paragens numa versão linear e radial para obter um aspeto consistente.