Como usar: Gerador de Gradiente CSS
- Escolha uma predefinição ou comece pelo gradiente padrão.
- Selecione Linear, Radial ou Cônico e defina o ângulo, a forma ou a posição.
- Edite as paradas de cor: clique na barra para adicionar uma, arraste as alças para mover e digite cores e posições exatas na lista.
- Se quiser, escolha uma interpolação OKLab/OKLCH para transições mais suaves e clique em Copiar CSS.
O que é um gradiente CSS?
Um gradiente CSS é uma imagem gerada pelo navegador que faz a transição entre duas ou mais cores. Como ele é uma <image>, você o usa em background, background-image, border-image ou mask-image, e não em background-color. Gradientes não precisam de requisição HTTP, escalam para qualquer tamanho sem perder nitidez e podem ser animados ou sobrepostos.
Gradientes lineares, radiais e cônicos
| Tipo | Exemplo | Uso comum |
|---|---|---|
| Linear | linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) | Fundos de hero, botões, sobreposições de imagem |
| Radial | radial-gradient(circle at top, #fff 0%, #312e81 100%) | Efeitos de holofote, brilhos, vinhetas |
| Cônico | conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, magenta, red) | Rodas de cores, gráficos de pizza, loaders |
Em um gradiente linear, 0deg aponta para cima e 90deg aponta para a direita (o mesmo que to right). Os ângulos de um gradiente cônico começam no topo e giram no sentido horário.
Paradas de cor e bordas duras
Cada parada é uma cor com uma posição opcional. Quando duas paradas têm a mesma posição, a transição vira uma borda dura. É assim que se criam listras ou a predefinição Gráfico de pizza: #4f46e5 0% 40%, #22c55e 40% 75%. Para fazer um conteúdo desaparecer gradualmente na página, termine com uma versão transparente da mesma cor (por exemplo, #00000000), o que evita uma faixa cinza suja.
Gradientes mais suaves com OKLab e OKLCH
Por padrão, os navegadores interpolam em sRGB, então a transição de azul para amarelo passa por um cinza opaco. A especificação CSS Color 4 permite escolher o espaço de cor: linear-gradient(90deg in oklab, blue, yellow) mantém a transição brilhante e uniforme, e in oklch percorre a roda de matizes. O gerador mostra primeiro a declaração sRGB simples e depois a versão interpolada, então navegadores que não entendem a sintaxe simplesmente ignoram a última linha.
Usando gradientes no Webflow
O painel Style do Webflow tem editores de gradiente linear e radial embutidos em Backgrounds. Copie o ângulo e as cores das paradas daqui para lá. Para o que o painel não oferece, como gradientes cônicos ou interpolação in oklch, cole o CSS em um bloco <style> dentro de um elemento Embed ou no código personalizado da página e aplique à sua classe. Precisa de sombras combinando? Experimente o Gerador de Box Shadow, ou verifique o texto sobre o gradiente com o Verificador de Contraste.
Também pesquisado como: gradiente css, gerador de gradiente, linear-gradient, radial-gradient, conic-gradient, paradas de cor, gradiente webflow, gradiente oklch.
Ferramentas que combinam com: Gerador de Gradiente CSS
- Gerador de Padrões SVG — Dê um toque de textura sutil a seções e cards com padrões SVG sem emendas: bolinhas, grades, linhas diagonais, zigue-zagues, ondas, sinais de mais, xadrez, círculos, triângulos e muito mais.
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- SVG para CSS — Cole um SVG e receba uma data URI compacta, codificada em URL, além de regras background-image e mask-image prontas para uso, com cor ajustável.
- Gerador de imagens OG — Crie uma imagem de pré-visualização de link bem feita para o Facebook, LinkedIn, X, Slack e WhatsApp em segundos — escolha um modelo, digite o título, adicione um logotipo e, em seguida, baixe o arquivo PNG e as metatags correspondentes.
Perguntas frequentes
Como deixo um gradiente transparente?
linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)). Fazer a transição para a mesma cor com alpha zero evita a faixa cinza que pode aparecer com a palavra-chave transparent em navegadores mais antigos.Por que meu gradiente fica sujo ou cinza no meio?
Posso aplicar um gradiente em um texto?
background-clip: text; -webkit-background-clip: text; color: transparent;. Mantenha uma cor sólida em color como fallback para garantir a legibilidade e verifique o contraste com a página.Por que o CSS inclui primeiro uma cor de fundo sólida?
Como animo um gradiente CSS?
background-position em um gradiente maior que o elemento ou registrar propriedades customizadas com @property e animar as cores das paradas ou o ângulo.