Gerador de gradiente CSS

Este gerador de gradientes CSS cria gradientes lineares e radiais a partir das paradas de cor que você controla, com visualização ao vivo e uma declaração de fundo pronta para colar. Arraste as paradas pela barra, defina o ângulo ou a forma e o CSS será atualizado imediatamente.

Tudo funciona no seu navegador com as cores e configurações que você escolher, por isso nada é enviado. Você pode copiar o resultado e usá-lo offline.

Um gradiente linear mistura cores ao longo de uma linha reta e o ângulo define 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 paradas de cor. Mudar o tipo mantém as cores e altera apenas a forma como se distribuem.

Cada parada de cor é uma cor colocada em uma 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 precisa 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, por isso 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 reusar as mesmas paragens em uma versão linear e radial para obter um aspeto consistente.