Gerador de Gradiente

Gerador de Gradiente CSS - Criar Gradientes Bonitos

Um poderoso gerador de gradiente CSS que cria gradientes lineares e radiais com múltiplas cores. Recursos incluem visualização ao vivo, direções e posições personalizáveis, gradientes predefinidos e exporta código CSS pronto para usar. Perfeito para web designers e desenvolvedores criando designs web modernos. Veja também nosso Gerador de Paleta de Cores e nosso Verificador de Contraste de Cores.

Como crio um gradiente CSS para uma seção hero?

Comece com duas cores relacionadas — matizes análogos são os mais seguros porque misturam sem produzir tons médios barrentos. Coloque-as nas duas primeiras paradas de cor e ajuste o ângulo para 135deg, que se lê como luz natural vinda do canto superior esquerdo e é a direção de gradiente mais popular em heros modernos. Pré-visualize e copie a regra CSS gerada (ex.: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);) e cole no container hero da sua folha de estilo. Para legibilidade do texto, sobreponha uma camada semi-transparente escura entre o gradiente e o texto usando um segundo background-image com linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) acima do gradiente colorido. Esse é o truque que quase toda landing page moderna usa.

Qual a diferença entre gradientes lineares e radiais?

Um gradiente linear transita cores ao longo de um eixo reto definido por um ângulo (0deg é de baixo para cima, 90deg da esquerda para direita, 180deg de cima para baixo, 270deg da direita para esquerda). É a escolha certa para fundos full-bleed, cards, botões, e qualquer lugar onde você queira uma varredura direcional. Um gradiente radial transita cores de um ponto central para fora em círculos ou elipses concêntricos; você pode posicionar o centro em qualquer lugar (radial-gradient(circle at top right, #A, #B)). É a escolha certa para efeitos de holofote, esferas brilhantes, estados hover de botão e fundos abstratos. Lineares são de longe os mais comuns em UI de produção; radiais tendem a parecer mais decorativos e são usados com parcimônia.

O que são paradas de cor e como funcionam as porcentagens?

Uma parada de cor é um par (cor, posição) que diz ao navegador exatamente onde no eixo do gradiente aquela cor deve aparecer em força total. Posições são porcentagens de 0% (início do eixo) a 100% (fim). Sem posições, o navegador distribui as paradas uniformemente: duas cores em 0% e 100%, três em 0%, 50%, 100%, e assim por diante. Você pode deslocar qualquer parada para enviesar o gradiente: linear-gradient(red 0%, yellow 20%, blue 100%) torna a transição vermelho-amarelo apertada e dá a maior parte da tela para a mistura amarelo-azul. Colocar duas paradas na mesma posição cria uma parada dura (sem mistura, mudança instantânea de cor), é assim que listras, barras de progresso segmentadas e fundos em blocos de cor são construídos.

Como escolho o ângulo certo para o gradiente?

A convenção de ângulos CSS é estilo relógio: 0deg aponta para cima, 90deg para a direita, 180deg para baixo, 270deg para a esquerda. 90deg (esquerda para direita) funciona bem em barras de navegação e cabeçalhos de linha do tempo; 180deg (cima para baixo) é o gradiente padrão estilo céu; 135deg (canto superior esquerdo para inferior direito) é o cavalo de batalha visual — lê-se como luz diurna natural e é o que a maioria dos apps modernos usa para heros, dashboards e fundos de card. Inverta um gradiente somando 180 ao seu ângulo, ou use o botão Inverter que troca as paradas. Evite ângulos como 1deg ou 89deg a menos que queira um efeito quase-mas-não-totalmente horizontal; a leve inclinação geralmente parece bug CSS, não design intencional.

Posso criar gradientes com mais de duas cores suavemente?

Sim, e adicionar uma terceira cor é a forma mais fácil de fazer um gradiente parecer premium em vez de genérico. O truque é escolher três cores que já estejam próximas no círculo cromático — análogas (vermelho, laranja, amarelo) ou um par de marca mais um neutro relacionado. Coloque-as em 0%, 50%, 100% para mistura tríplice uniforme, ou empurre a parada central para fora do centro (0%, 30%, 100%) para assimetria. Evite pular pelo círculo porque o navegador interpola por matizes não relacionados e produz um cinza barrento no meio — um gradiente azul-amarelo passa por cinza-verde a 50%. Para efeitos arco-íris, seis ou sete paradas são necessárias, mas elas geralmente se leem como decorativas, não profissionais. Duas ou três paradas é o ponto ideal para a maioria do trabalho de UI.

Como mantenho o texto legível sobre um fundo gradiente?

Gradientes mudam o contraste ao longo de sua extensão, então uma cor de primeiro plano que atende WCAG 4.5:1 no topo pode falhar no fundo. Quatro defesas: (1) sobreponha uma camada plana semi-transparente escura ou clara entre o gradiente e o texto usando um segundo background-image — linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) mantém o contraste uniforme; (2) restrinja o texto a uma caixa plana com seu próprio fundo (um card sobre o hero); (3) adicione uma sombra de texto sutil (text-shadow: 0 1px 3px rgba(0,0,0,0.4)) para destacar as letras de áreas movimentadas; (4) limite a saturação do gradiente para que a parada mais escura ainda seja escura o suficiente para contrastar com branco no pior caso. Sempre valide o contraste do pior cenário com um verificador WCAG antes de publicar.

Qual o custo de desempenho de gradientes CSS versus fundos de imagem?

Gradientes CSS são essencialmente gratuitos comparados a fundos de imagem. O navegador os calcula em tempo de pintura usando shaders GPU simples, a regra em si ocupa dezenas de bytes de texto em vez de dezenas ou centenas de kilobytes de pixels comprimidos, e escalam para qualquer tamanho de container sem produzir bordas borradas como um JPG faria. Eles também se adaptam instantaneamente a modo escuro ou sobrescritas de tema mudando variáveis CSS. O único custo menor é durante animações: animar background-image não é acelerado por GPU, então transições cross-fade entre dois gradientes podem travar. A solução é sobrepor dois fundos de gradiente e animar a opacidade do superior, que é totalmente acelerada por GPU. Para heros estáticos, gradientes quase sempre são preferíveis a fundos raster.

Como combino um gradiente com cores que já vejo em um site que admiro?

Tire um screenshot da inspiração, abra em qualquer seletor de cores (o Seletor de Cor de Imagem deste site, Figma ou o conta-gotas do SO) e amostre o destaque mais brilhante e a sombra mais escura dentro do gradiente. Coloque esses dois valores HEX nas primeiras e últimas paradas de cor aqui. Se o gradiente original for de três cores, amostre o meio também e adicione uma parada em aproximadamente a mesma porcentagem. A maioria dos gradientes profissionais usa paradas monocromáticas (um matiz, duas luminosidades) ou análogas (matizes vizinhos com interpolação suave); se sua amostra mostrar uma cor central muito diferente, provavelmente é uma mistura aditiva com sobreposição translúcida, não um único gradiente. Tente mudar o ângulo para 135deg se a inspiração varre na diagonal.

Recursos Principais

• Crie gradientes lineares e radiais
• Visualização ao vivo com atualizações instantâneas
• Adicione pontos de cor ilimitados
• Ajuste posições de cores com precisão
• Múltiplas opções de direção
• Suporte a ângulo personalizado (0-360°)
• 8 belos gradientes predefinidos
• Copie código CSS para área de transferência
• Gerador de gradiente aleatório
• Inverter direção do gradiente
• Remover pontos de cor (mínimo 2)
• Exporte CSS pronto para usar
• Processamento 100% do lado do cliente
• Sem comunicação com servidor
• Funciona offline
• Suporte a modo escuro
• Interface amigável para mobile