Crie um gradiente CSS e copie o código
Este gerador de gradiente CSS cria fundos <code>linear-gradient()</code>, <code>radial-gradient()</code> e <code>conic-gradient()</code> de forma visual. Clique na barra de paradas para adicionar cores, arraste-as para o lugar, defina a opacidade de cada parada e ajuste o ângulo, a forma ou o centro enquanto a prévia se atualiza ao vivo. Copie o CSS com uma cor de fallback sólida, copie uma classe Tailwind pronta ou exporte o gradiente como PNG em qualquer tamanho. Cole um gradiente da sua folha de estilos para editá-lo aqui. Tudo roda localmente no seu navegador.
Como fazer um gradiente CSS
- 1Escolha Linear, Radial ou Cônico, ou comece com um dos presets.
- 2Clique em qualquer ponto da barra para adicionar uma parada de cor, arraste as paradas para movê-las e pressione Delete numa parada em foco para removê-la. As setas movem a parada em foco 1%, Shift+seta 10%.
- 3Escolha a cor e a opacidade de cada parada. Qualquer cor CSS funciona: hex,
rgb(),hsl(),oklch()ou um nome de cor. - 4Defina o ângulo com o dial (segure Shift para pular de 15° em 15°) ou, em gradientes radiais e cônicos, arraste na prévia para mover o centro.
- 5Copie o CSS ou a classe Tailwind, ou defina largura e altura e baixe um PNG.
Gradientes lineares, radiais e cônicos
- linear-gradient()
- As cores mudam ao longo de uma linha reta em um ângulo. <code>0deg</code> aponta para cima, <code>90deg</code> para a direita; as palavras-chave <code>to right</code> e <code>to bottom left</code> dizem o mesmo em palavras. A linha do gradiente tem o comprimento exato para que os cantos recebam a primeira e a última cor.
- radial-gradient()
- As cores se espalham a partir de um centro como círculo ou elipse. A palavra-chave de tamanho decide onde fica o 100%: <code>farthest-corner</code> (padrão) alcança o canto mais distante da caixa, <code>closest-side</code> para na borda mais próxima.
- conic-gradient()
- As cores giram em torno de um centro como os ponteiros de um relógio, começando no ângulo <code>from</code>. Paradas duras criam gráficos de pizza e rodas de cores sem nenhuma imagem.
Paradas de cor, bordas duras e transparência
Cada parada de cor é uma cor e uma posição. Entre duas paradas o navegador mistura suavemente; quando duas paradas têm a mesma posição, a cor muda de repente, e é assim que listras, bandeiras e gráficos de pizza são desenhados. Dê a mesma cor a duas paradas vizinhas para mantê-la como uma faixa sólida.
As paradas podem ser parcialmente transparentes, então um gradiente pode fundir uma imagem com a página ou escurecer a parte de baixo de uma imagem de destaque para o texto branco continuar legível. Navegadores modernos misturam paradas transparentes em cor pré-multiplicada, então esmaecer até transparent não fica mais cinza no meio, mas o gerador ainda escreve a cor rgba() explícita para maior clareza.
Gradientes repetidos
repeating-linear-gradient() e suas versões radial e cônica repetem o padrão entre a primeira e a última parada por toda a caixa. Ative Repetir e mova a última parada bem antes de 100%, para 10% por exemplo, para obter listras, anéis ou raios de sol. Se a última parada estiver em 100%, um gradiente repetido fica igual a um normal.
Cor de fallback, Tailwind e exportação PNG
Gradientes são imagens, então um navegador que não consegue desenhá-los não mostra nada atrás do seu texto. A linha de fallback opcional define antes um background sólido com a média das suas paradas, e a linha do gradiente logo depois a substitui onde gradientes funcionam.
A saída Tailwind é uma classe de valor arbitrário como bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)]. Os espaços viram sublinhados porque nomes de classe do Tailwind não podem ter espaços; funciona no Tailwind 3 e 4 sem configuração.
A exportação PNG pinta o mesmo gradiente num canvas no tamanho que você escolher, até 8192 pixels por lado, para papéis de parede, imagens para redes sociais ou ferramentas de design que não leem CSS. Escolha cores adequadas ao seu texto com o verificador de contraste, converta-as entre notações com o Conversor de Cores ou adicione profundidade com o gerador de box-shadow.
Editar um gradiente existente
Cole um gradiente em Importar: um linear-gradient(…) sozinho, uma declaração background: ou background-image: completa, uma versão com prefixo -webkit- ou uma classe Tailwind bg-[…]. Direções como to top right, ângulos em deg, turn ou rad, paradas com duas posições e paradas sem posição são todas lidas. Posições em pixels e dicas de cor não podem ser mostradas numa barra de porcentagem, então são aproximadas e a importação avisa você.
Perguntas frequentes
- Como faço um fundo gradiente em CSS?
- Defina background (ou background-image) como uma função de gradiente, por exemplo background: linear-gradient(90deg, #ff7e5f, #feb47b);. Este gerador escreve essa linha para você, com uma cor de fallback sólida opcional antes.
- Qual a diferença entre gradiente linear, radial e cônico?
- Um gradiente linear muda de cor ao longo de uma linha reta, um radial se espalha a partir de um centro em círculos ou elipses e um cônico gira em torno de um centro como o ponteiro de um relógio.
- Como faço uma borda dura ou listras?
- Coloque duas paradas na mesma posição com cores diferentes. Para listras repetidas, ative Repetir e coloque a última parada num valor pequeno, como 10%.
- Um gradiente CSS pode ser transparente?
- Sim. Diminua a opacidade de uma parada e o gerador a escreve como rgba(). Um gradiente de uma cor até transparente é uma forma comum de fundir uma imagem ou sobreposição com a página.
- Como uso um gradiente no Tailwind CSS?
- Copie a classe Tailwind, um valor arbitrário como bg-[linear-gradient(90deg,#ff7e5f_0%,#feb47b_100%)], e adicione ao seu elemento. Os utilitários from-/via-/to- do Tailwind só cobrem gradientes lineares simples; o valor arbitrário aceita qualquer gradiente.
- Gradientes cônicos funcionam em todos os navegadores?
- conic-gradient() funciona em todas as versões atuais do Chrome, Edge, Firefox e Safari. Adicione a cor de fallback se você ainda dá suporte a navegadores muito antigos.
- Posso baixar o gradiente como imagem?
- Sim. Informe largura e altura e baixe um PNG. A imagem é desenhada no seu navegador exatamente nesse tamanho, até 8192 × 8192 pixels.
- Algo é enviado para um servidor?
- Não. A prévia, o CSS e a exportação PNG são todos gerados no seu navegador.