Gerador de gradiente CSS — crie gradientes e copie o CSS

O que é um Gerador de gradiente CSS?

Um Gerador de gradiente CSS (CSS ग्रेडिएंट जनरेटर) permite desenhar gradientes de cores visualmente e obter o código CSS correspondente. Os gradientes — transições suaves de uma cor para outra — estão por toda parte no design moderno: seções principais, botões, cards, fundos de apps e miniaturas do YouTube. Escrever linear-gradient() à mão e atualizar a página para ver o resultado é lento; com um gerador você arrasta controles, vê uma prévia ao vivo e copia o código pronto.

Esta ferramenta grátis aceita os três tipos de gradiente CSS — linear, radial e cônico — com de 2 a 8 paradas de cor, ângulo, forma e centro ajustáveis, nove predefinições prontas, botões de aleatório e inverter, saída CSS com cor sólida de alternativa e um download de PNG 1920×1080 para quando você precisa do gradiente como imagem. Tudo roda no seu navegador.

Principais recursos

• Três tipos de gradiente — linear, radial e cônico.
• Controle de ângulo de 0° a 360° para gradientes lineares e cônicos.
• Forma e centro para o radial (círculo ou elipse) e centro para o cônico.
• Até 8 paradas de cor, cada uma com seletor de cor, campo HEX e controle de posição.
• Nove predefinições, incluindo Oceano, Pôr do sol, Menta e uma predefinição Açafrão em açafrão-branco-verde.
• Aleatório e Inverter para explorar rapidamente.
• CSS com alternativa — pronto para colar.
• Exportação em PNG em 1920×1080 para papéis de parede, miniaturas e slides.

Como criar um gradiente — passo a passo

1. Escolha o tipo: Linear, Radial ou Cônico.
2. Defina a direção: arraste o controle de ângulo, ou escolha a forma e o centro.
3. Edite as paradas de cor: clique em uma caixa de cor ou digite um código HEX e depois arraste o controle para definir a posição dela.
4. Adicione ou remova paradas com «Adicionar parada» e o botão × (mínimo 2, máximo 8).
5. Experimente predefinições, Aleatório ou Inverter para ter ideias.
6. Copie o CSS ou baixe o PNG.

Sintaxe do gradiente CSS explicada

Em um gradiente linear, o ângulo segue a convenção do CSS: 0deg aponta para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda, girando no sentido horário. Palavras-chave também funcionam — to right equivale a 90deg e to bottom right aponta para o canto. Nos gradientes radiais, circle mantém uma forma redonda, enquanto ellipse (o padrão no CSS) se estica conforme as proporções do elemento. Os gradientes cônicos começam no ângulo dado depois de from e varrem no sentido horário ao redor do centro.

Entendendo as paradas de cor

Cada parada tem uma cor e uma posição de 0% a 100% ao longo do gradiente. O navegador faz uma mistura suave entre paradas vizinhas. Alguns padrões úteis:

• Mistura uniforme — paradas em 0% e 100% para uma transição simples de duas cores.
• Viés — mova a segunda parada para 30% para que a segunda cor domine.
• Borda dura — duas paradas na mesma posição criam uma linha nítida, útil para listras e fundos divididos.
• Bandeira de três cores — a predefinição Açafrão usa #FF9933 0%, #FFFFFF 50%, #138808 100%.

As paradas são ordenadas pela posição quando o CSS é escrito, então você pode adicioná-las em qualquer ordem. O botão Inverter espelha cada posição (uma parada em 20% vai para 80%), virando o gradiente sem digitar as cores de novo.

Usos práticos

• Seções principais e landing pages — um gradiente diagonal sutil dá profundidade sem uma imagem.
• Botões — um gradiente suave de dois tons parece moderno; escureça-o um pouco no hover.
• Cards e sobreposições — um gradiente de transparente para escuro sobre uma foto deixa o texto branco legível.
• Texto em gradiente — aplique o gradiente como fundo e recorte-o ao texto.
• Gráficos de pizza e anéis de progresso — gradientes cônicos com bordas duras os desenham só com CSS.
• Miniaturas e papéis de parede — baixe o PNG em 1920×1080 e adicione texto em qualquer editor.

Trechos prontos para usar

Texto em gradiente: background: linear-gradient(90deg, #1B98E0, #7B2FF7); -webkit-background-clip: text; background-clip: text; color: transparent;

Sobreposição em foto: background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%), url(photo.jpg) center / cover; — o gradiente é listado primeiro para ficar por cima da imagem.

Gráfico de pizza simples: background: conic-gradient(#1B98E0 0% 40%, #FF9933 40% 75%, #138808 75% 100%); border-radius: 50%; — fatias de 40%, 35% e 25%.

Exemplo resolvido: um fundo de miniatura

Suponha que você precise de um fundo marcante para uma miniatura do YouTube sobre tecnologia. Escolha Linear, clique na predefinição Oceano (#1B98E0 a #7B2FF7) e defina o ângulo como 135° para que a cor corra do canto superior esquerdo ao canto inferior direito. A caixa de CSS agora mostra background: linear-gradient(135deg, #1B98E0 0%, #7B2FF7 100%);. Quer um holofote suave atrás do apresentador? Mude para Radial, escolha Círculo e centralize-o à Direita, e depois adicione uma terceira parada de #FFFFFF em 0% para que o brilho comece forte. Quando estiver bom, clique em Baixar PNG para obter uma imagem de 1920×1080, que mantém o formato 16:9 de uma miniatura; abra-a no seu editor e adicione texto e uma foto por cima. Como a imagem é gerada por cálculo de cores e não por uma foto, ela continua nítida mesmo comprimida.

Qual tipo de gradiente escolher?

O Linear é o padrão seguro para fundos, botões e cabeçalhos — é fácil de ler e funciona em qualquer tamanho. O Radial cria foco: um centro mais claro atrai o olhar para o que está por cima, o que serve a cards de perfil, holofotes e efeitos de vinheta. O Cônico é o especialista — perfeito para rodas de cores, gráficos de pizza, indicadores de carregamento e padrões em estrela, mas pode ficar carregado como fundo de página inteira. Se estiver em dúvida, comece com o linear a 135° e depois experimente.

Sobre a exportação em PNG

O PNG é desenhado com as funções de gradiente do canvas do navegador em 1920×1080 pixels. Para gradientes lineares, a ferramenta reproduz a convenção de ângulo do CSS e o comprimento da linha do gradiente, então a imagem coincide com o que você vê na prévia. Para gradientes radiais, o PNG usa um círculo que alcança o canto mais distante, o tamanho padrão do CSS; se você escolheu uma elipse, o PNG ainda é desenhado como um círculo, então a forma pode diferir um pouco. A exportação cônica exige um navegador com suporte a cônico no canvas — o Chrome, Edge, Firefox e Safari atuais o têm.

Dicas de design e acessibilidade

• Confira o contraste nas duas pontas. O texto precisa ser legível sobre as partes mais claras e mais escuras do gradiente. Nosso Gerador de paleta de cores mostra as taxas de contraste.
• Seja sutil em áreas grandes. Matizes vizinhos (azul para roxo) parecem mais calmos que opostos (vermelho para verde), que podem produzir um meio embaçado.
• Evite meios acinzentados. Se uma mistura de duas cores parecer sem graça no centro, adicione uma parada intermediária mais viva.
• Use as cores da marca. Gradientes entre dois tons da cor da sua marca mantêm os designs consistentes.
• Respeite o modo escuro. Gradientes vivos podem ofuscar em temas escuros; considere uma variante mais profunda.

Quem usa um Gerador de gradiente?

• Desenvolvedores front-end que estilizam sites e apps.
• Designers de UI/UX que prototipam fundos e botões.
• YouTubers e criadores do Instagram que fazem miniaturas e fundos de stories.
• Blogueiros que adicionam cabeçalhos coloridos sem imagens pesadas.
• Estudantes que aprendem CSS.
• Apresentadores que querem fundos de slides limpos.

Erros comuns a evitar

• Usar background-color — gradientes são imagens, então use background ou background-image.
• Cores demais — mais de três ou quatro paradas podem parecer carregadas.
• Esquecer a altura do elemento — um gradiente em um elemento vazio sem altura fica invisível.
• Repetição em páginas longas — no body, adicione min-height: 100vh ou background-attachment: fixed para que o gradiente cubra a tela toda em vez de se repetir em faixas quando o conteúdo é curto.

Solução de problemas

• Campo HEX ignorado — informe um código completo de seis dígitos com # (por exemplo, #1B98E0).
• Não consegue remover uma parada — um gradiente precisa de pelo menos duas paradas.
• Bandas em gradientes grandes — podem aparecer listras sutis com cores muito parecidas em algumas telas; aumente um pouco a diferença de cor.

Glossário rápido

• Gradiente: uma transição suave entre cores.
• Parada de cor: uma cor e sua posição em um gradiente.
• Linear: mistura ao longo de uma linha reta.
• Radial: mistura para fora a partir de um centro.
• Cônico: mistura ao redor de um ponto central.
• Alternativa (fallback): uma cor sólida usada se o gradiente não for aplicado.

Por que usar este Gerador de gradiente CSS?

Ele cobre todo tipo de gradiente CSS com controles precisos, prévia ao vivo, código limpo e exportação de imagem — grátis, rápido e privado.

Gerador de gradiente CSS — Informações principais

Perguntas frequentes

Conheça mais ferramentas da Prompt Minds

O Gerador de gradiente CSS funciona muito bem junto com nossas outras ferramentas grátis. Todas as ferramentas do Prompt Minds rodam inteiramente no seu navegador — sem cadastro, sem uploads, sem marca d’água. Ver todas as ferramentas grátis.