Utilore

Gerador de gradiente CSS

Arraste os controles e veja o painel de cima mudar junto. Quando ficar bom, copie a linha e cole na sua folha de estilos — não precisa de mais nada.

O ângulo aplica-se aos gradientes linear e cônico; o radial parte do centro.

Paradas de cor

    Como usar

    1. Escolha o tipo: o linear segue uma reta, o radial se espalha do centro, o cônico gira em torno dele.
    2. Ajuste o ângulo e mova as paradas para onde as cores devem se encontrar.
    3. Adicione mais paradas se duas cores não bastarem, ou clique em «Surpreenda-me».
    4. Copie a linha CSS abaixo da pré-visualização.

    Bom saber

    Por que a pré-visualização fica sobre um xadrez

    Um gradiente costuma terminar numa cor transparente e, sobre um painel branco liso, isso parece igual a uma cor opaca. O xadrez aparece por baixo onde quer que a cor não seja sólida, então o que você configura é o que vê — um hábito herdado dos editores de imagem exatamente por esse motivo.

    As paradas são ordenadas antes de o código ser escrito

    O CSS não reordena as paradas por você: uma parada em 70 % escrita antes de outra em 30 % faz o navegador travar a segunda, e o gradiente perde uma cor em silêncio. A ferramenta ordena as paradas por posição ao montar a linha, então arrastar um controle além do vizinho nunca quebra o resultado.

    Perguntas frequentes

    Qual a diferença entre os três tipos?

    O gradiente linear segue uma reta e aceita um ângulo: 90deg vai da esquerda para a direita, 180deg de cima para baixo. O radial se espalha em círculos a partir do centro, bom para brilhos e holofotes. O cônico gira em torno de um ponto como o ponteiro de um relógio — é dele que saem os gráficos de pizza e as rodas de cor.

    Como faço um gradiente com transparência?

    Escolha uma cor e reduza a opacidade no seletor, se o seu navegador oferecer alfa, ou edite a linha copiada à mão: rgba(31, 95, 214, 0) funciona como parada igual a uma cor sólida. Um esmaecer para transparente é mais útil que um para branco — funciona sobre qualquer fundo.

    Posso usar como cor de texto?

    Sim, com duas linhas a mais: ponha o gradiente em background-image e acrescente background-clip: text e color: transparent. O texto mantém a forma e o gradiente aparece através das letras.

    Por que o mesmo ângulo parece diferente no modo radial?

    Ali ele não se aplica. Um gradiente radial parte do centro e não tem direção, então o ângulo fica para os modos linear e cônico, onde decide onde a varredura começa.

    Ferramentas relacionadas