Gerador Gradiente CSS Online
Crie gradientes CSS com preview ao vivo. Sem instalações, grátis.
background: linear-gradient(135deg, #667eea, #764ba2);
Por que usar
Gradientes CSS perfeitos em segundos
Preview ao vivo
Veja o resultado conforme ajusta cores, ângulos e posições.
Código pronto para produção
Sintaxe CSS moderna. Sem prefixos de fornecedor desnecessários.
Compatível com navegadores
Verifique a compatibilidade e obtenha o código correto para seus navegadores alvo.
Sem instalações
Tudo no navegador. Sem Figma, Sketch ou plugins necessários.
Como funciona
Três passos, sem complicação
Escolha o tipo de gradiente
Selecione entre linear-gradient, radial-gradient ou conic-gradient. Cada tipo tem seus próprios controles específicos.
Configure as cores e posições
Adicione quantas paradas de cor precisar. Ajuste o ângulo, a posição do centro e o percentual de cada cor usando os controles visuais.
Copie o código CSS
O código CSS é gerado em tempo real. Copie a propriedade background completa pronta para colar na sua folha de estilos.
Perguntas frequentes
Ficou com dúvidas?
Um gradiente linear (linear-gradient) faz a transição entre cores ao longo de uma linha reta em um ângulo definido. Um gradiente radial (radial-gradient) irradia de um ponto central para fora em formato circular ou elíptico. Um gradiente cônico (conic-gradient) faz a transição ao redor de um ponto central como os ponteiros de um relógio, ideal para gráficos de pizza ou efeitos de cores giratórias em CSS puro.
Use rgba() ou a palavra-chave transparent como parada de cor. Por exemplo: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) cria um gradiente de vermelho sólido para vermelho totalmente transparente. Evite usar transparent diretamente em gradientes sobre fundos escuros, pois os navegadores interpolam pelo preto (rgba(0,0,0,0)), criando um artefato acinzentado indesejado.
Gradientes linear e radial são suportados em todos os navegadores modernos desde 2012 (Chrome 26 ou superior, Firefox 16 ou superior, Safari 6.1 ou superior, Edge 12 ou superior). Gradientes cônicos são mais recentes: suportados desde o Chrome 69 (2018), Firefox 83 (2020) e Safari 12.1 (2019). Para projetos que exigem suporte ao IE11, os gradientes CSS não têm fallback nativo: use imagens SVG como alternativa.
Adicione múltiplas paradas de cor: linear-gradient(45deg, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Controle a posição exata de cada cor usando percentuais ou valores absolutos (px, em). Se você não especificar posições, as cores são distribuídas de forma uniforme.
Gradientes CSS são gerados pela GPU do navegador e não exigem nenhuma requisição de rede, tornando-os significativamente mais eficientes do que imagens. No entanto, gradientes CSS muito complexos com muitas paradas de cor podem impactar o redesenho da página. Para gradientes animados, o desempenho pode cair em dispositivos móveis de entrada: prefira usar transform ou opacity, que são propriedades aceleradas por GPU e não causam reflow.
Gradientes CSS: histórico da especificação W3C e técnicas avançadas
Os gradientes CSS têm uma história de padronização complexa. As primeiras implementações surgiram como extensões proprietárias: -webkit-gradient() no Safari 4 (2008) com uma sintaxe completamente diferente da atual. A Mozilla implementou -moz-linear-gradient() no Firefox 3.6 (2010). A sintaxe moderna, muito mais intuitiva, foi introduzida no módulo W3C CSS Images Level 3, atingindo o status de Candidate Recommendation em 2011 e suporte sem prefixo no Chrome 26 e Firefox 16 em 2012. A função conic-gradient() foi proposta por Lea Verou em 2015 e padronizada no CSS Images Level 4.
Os gradientes CSS são renderizados inteiramente na GPU por meio da camada compositing do navegador, ao contrário de imagens rasterizadas que exigem decodificação prévia na CPU. Isso os torna particularmente eficientes para fundos de grande área. Internamente, o motor de renderização (Skia no Chrome e Edge, WebRender no Firefox) calcula a interpolação de cores no espaço de cores sRGB por padrão. O CSS Color Level 4 introduz interpolação em outros espaços de cores (oklch, display-p3), permitindo gradientes perceptualmente mais uniformes sem faixas de cor indesejadas.
Uma técnica avançada é o gradiente halftone, que usa múltiplas camadas de fundo para criar padrões de pontos. Outra é usar gradientes como máscaras CSS com mask-image: linear-gradient(), permitindo desvanecer elementos sem JavaScript. Para efeitos de texto em gradiente, background-clip: text é combinado com color: transparent, uma técnica popularizada no design de interface moderno desde 2015 e amplamente usada nas interfaces da Apple, Google e Meta. Gradientes também são a base do neumorfismo e glassmorfismo, as tendências de design dominantes de 2019 a 2023.