Boa parte da documentação de CSS em português que circula online — inclusive nas páginas traduzidas do MDN — é obra de colaboradores brasileiros, e é por isso que o termo "gradiente" (não "degradê", termo mais comum no design gráfico impresso) predomina nos tutoriais técnicos em português.
linear-gradient e radial-gradient
linear-gradient(45deg, red, blue) estica a cor ao longo de uma linha reta no ângulo definido — o tipo mais usado em fundos de botões, banners e cartões. radial-gradient(circle, yellow, orange) espalha a cor em círculos ou elipses concêntricos a partir de um ponto, ideal para simular um foco de luz.
conic-gradient: o mais recente dos três
conic-gradient(red, yellow, green, blue, red) gira a cor ao redor de um ponto central, como o ponteiro de um relógio. Por ter sido padronizado bem depois dos outros dois tipos, é o único capaz de desenhar um gráfico de pizza ou um indicador de progresso em anel sem recorrer a imagens ou SVG adicional.
Color stops e gradientes repetidos
Cada cor pode ser ancorada a uma posição em porcentagem, como em linear-gradient(red 0%, yellow 50%, blue 100%), controlando o quão abrupta é a transição. As funções repeating-linear-gradient() e repeating-radial-gradient() repetem essa sequência de stops automaticamente, criando padrões listrados ou em tabuleiro de xadrez com uma única linha de CSS.
Para que serve
- Escolher e copiar código CSS de gradiente pronto sem ajustar ângulos e cores manualmente.
- Entender qual tipo de gradiente é adequado para um efeito visual específico.
- Ajustar com precisão as posições dos color stops para a transição desejada.
Do design flat de volta ao gradiente
Depois de anos de design flat impulsionado pelo iOS 7 (2013), o gradiente voltou com força ao design de produto: o rebranding do Instagram em 2016 trocou o ícone de câmera skeuomórfico por uma marca em degradê laranja-roxo, e o estilo influenciou logos e telas de abertura de inúmeros aplicativos e fintechs brasileiras nos anos seguintes, num contraste direto com a estética plana da década anterior.