Gerador de gradientes CSS

Desenhe um gradiente de cores para o fundo do seu site e copie o CSS. Arraste as paragens sobre a barra, clique nela para acrescentar cores e escolha entre gradiente linear, radial ou cónico.

Tipos de gradiente em CSS

linear-gradient() funde as cores ao longo de uma linha com o ângulo que indicar (0deg de baixo para cima, 90deg da esquerda para a direita). radial-gradient() distribui-as em círculos ou elipses a partir de um centro, e conic-gradient() fá-las rodar em torno de um ponto, como numa roda de cores ou num gráfico circular.

As versões repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient() repetem o padrão: com paragens próximas (por exemplo, a 0% e a 10%) servem para fazer riscas e xadrez sem imagens.

Como usar o código

Os gradientes são imagens para o CSS: aplicam-se com background ou background-image, nunca com background-color. Todos os navegadores atuais os suportam sem prefixos -webkit-.

Para um texto com gradiente, combine o fundo com background-clip: text e color: transparent. E se puser texto por cima, verifique o contraste com a cor mais clara do gradiente.