Gerador de gradientes CSS

Os três tipos de gradiente

• linear-gradient(): as cores avançam em linha reta. O ângulo define a direção: 180deg vai de cima para baixo (é o valor por omissão) e 90deg da esquerda para a direita.
• radial-gradient(): as cores saem de um ponto para fora, em círculo ou em elipse. Útil para brilhos e vinhetas.
• conic-gradient(): as cores giram à volta de um centro, como uma roleta. Serve para gráficos circulares, rodas de cor e fundos com efeito metálico.

Paragens de cor

Cada paragem é uma cor e uma posição: #2563eb 0%, #db2777 100%. Se duas paragens partilharem a posição, a mudança é brusca em vez de gradual, e é assim que se fazem riscas:

background: linear-gradient(90deg, #2563eb 50%, #db2777 50%);

Um gradiente por cima de uma imagem

Para um título se ler sobre uma foto, coloque à frente um gradiente de preto transparente para preto semiopaco. Em CSS as camadas de background separam-se com vírgulas e a primeira fica por cima:

.hero {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%),
    url("foto.jpg") center / cover;
}

Para maquetar antes de ter a foto, serve uma do ximg.es: url("https://ximg.es/random/1600x900?seed=hero").

Dicas

• Entre duas cores muito diferentes (azul e amarelo, por exemplo) o centro pode ficar acinzentado. Acrescente uma paragem intermédia ou interpole noutro espaço de cor: linear-gradient(in oklch 90deg, …), compatível com os navegadores atuais.
• Para um gradiente no texto, combine background-clip: text com color: transparent.
• As versões repeating-linear-gradient() e semelhantes repetem o padrão: perfeitas para riscas e grelhas sem imagens.