Sobre esta ferramenta
Um gradiente CSS é uma imagem gerada pelo navegador que faz uma transição suave entre duas ou mais cores, declarada com as funções linear-gradient(), radial-gradient() ou conic-gradient(). Cada parada de cor associa uma cor a uma posição opcional (uma porcentagem ao longo da linha ou do arco do gradiente), e os gradientes lineares e cônicos adicionam um ângulo que define a direção da transição, enquanto os gradientes radiais recebem uma forma (círculo ou elipse) e uma posição para sua origem.
Use-o para criar planos de fundo de hero, preenchimentos de botões, sobreposições de cartões e detalhes de separadores sem ajustar a sintaxe manualmente: escolha um tipo, arraste o ângulo, adicione até seis paradas e copie a declaração background pronta para colar. A visualização fica sobre um xadrez para que você veja como as paradas semitransparentes se compõem, e os predefinidos oferecem paletas testadas de duas e três paradas para começar.
Os gradientes são renderizados como imagens CSS, portanto não têm tamanho intrínseco — defina uma largura e uma altura (ou use-os como plano de fundo), caso contrário o elemento se reduzirá e você não verá nada.
Perguntas frequentes
Qual é a diferença entre gradientes lineares, radiais e cônicos em CSS?
Um gradiente linear faz a transição das cores ao longo de uma linha reta em um determinado ângulo, um gradiente radial irradia para fora a partir de um ponto central como um círculo ou elipse, e um gradiente cônico varre as cores ao redor de um ponto central como os ponteiros de um relógio, razão pela qual é frequentemente usado para roda de cores e efeitos de gráfico de pizza.
Como funcionam os ângulos dos gradientes CSS?
Para linear-gradient(), um ângulo de 0deg aponta o gradiente diretamente para cima (em direção ao topo), 90deg para a direita, 180deg para baixo e 270deg para a esquerda, aumentando no sentido horário. Para conic-gradient(), o valor from <angle> apenas gira a posição inicial da varredura de cores ao redor do centro.
Posso usar mais de duas cores em um gradiente CSS?
Sim. Um gradiente aceita qualquer número de paradas de cor separadas por vírgulas, cada uma opcionalmente acompanhada de uma posição como #f00 0%, #ff0 50%, #00f 100%. As paradas são colocadas na ordem em que você as escreve, e este gerador suporta até seis.