Gradientes: Linear e Radial

Os gradientes CSS são imagens geradas (nenhum arquivo de imagem é necessário) que fazem a transição entre duas ou mais cores. Eles são especificados como valores de background-image ou da abreviação background.

Um gradiente linear faz a transição das cores ao longo de uma linha reta. O primeiro argumento define a direção, seguido pelas paradas de cor.

A direção pode usar palavras-chave ou ângulos em graus:

Adicione quantas paradas de cor forem necessárias. Cada parada pode especificar opcionalmente uma posição (comprimento ou porcentagem).

Defina duas paradas na mesma posição para criar uma parada brusca — uma mudança abrupta de cor sem mistura.

repeating-linear-gradient() repete o padrão do gradiente para criar listras e texturas.

Um gradiente radial se irradia para fora a partir de um ponto central, em formato elíptico ou circular.

Controle a forma do gradiente (circle ou ellipse) e sua palavra-chave de extensão:

Use at <position> depois da forma/tamanho para mover o centro do gradiente radial.

conic-gradient() varre as cores ao redor de um ponto central, como em um gráfico de pizza. Ele exige o ângulo inicial from e aceita opcionalmente uma posição at.

Use transparent ou rgba() nas paradas do gradiente para fazer uma transição suave entre a transparência e a cor de fundo de um elemento.

Qual função CSS gera um gradiente que se irradia para fora a partir de um ponto central?

Os gradientes lineares seguem uma linha, os gradientes radiais se irradiam para fora e os gradientes cônicos varrem as cores ao redor de um ponto. Use paradas bruscas para criar listras. Todas as funções de gradiente são valores de background-image e geram imagens sem arquivos externos.