Gerador de gradientes CSS

Defina a propriedade background (ou background-image) para uma função de gradiente. A mais simples é um gradiente linear de duas cores: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — isso pinta uma transição da esquerda para a direita do índigo ao rosa. Escolha suas cores e ângulo acima, depois copie a linha background pronta direto na sua folha de estilos. Não precisa escrever a sintaxe na mão — o gerador constrói tudo enquanto você arrasta cada parada para o lugar.

Um linear-gradient mistura as cores ao longo de uma linha reta no ângulo que você escolher (ex.: 90deg = da esquerda para a direita). Um radial-gradient irradia a partir de um ponto central em círculos ou elipses, como um holofote. Um conic-gradient varre as cores em torno de um ponto central como os ponteiros de um relógio, o que o torna perfeito para rodas de cores e gráficos de pizza. Esta ferramenta cria os três; alterne com os botões Linear / Radial / Cônico. A maioria das ferramentas gratuitas, como o gerador de fundo do Canva, oferece apenas gradientes lineares, e o cssgradient.io nem suporta gradientes cônicos.

Aplique um gradiente ao background de qualquer elemento. Para um fundo de página inteira, tente: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. Como um gradiente é tratado como imagem, você também pode adicionar background-attachment: fixed; para que ele fique fixo enquanto a página rola. Monte visualmente acima e copie o CSS. Sem precisar de Figma, Canva ou qualquer ferramenta de design. Funciona igual em todos os navegadores modernos sem prefixos em 2026.

Adicione paradas de cor extras, cada uma com sua própria posição. Clique em qualquer lugar na barra de gradiente (ou no botão + Adicionar parada) para inserir uma nova parada e depois arraste para onde quiser. Três cores ficam assim: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). Não há limite real — adicione quantas paradas seu design precisar. Ao contrário do coolors.co, que mostra apenas paletas sem o CSS, ou do Canva, que trava a edição de gradiente por trás de uma conta, aqui você gera CSS de produção com paradas ilimitadas na hora.

Para um gradiente linear, o primeiro valor é o ângulo: 0deg aponta para cima, 90deg aponta para a direita, 180deg aponta para baixo, 270deg aponta para a esquerda. Você também pode usar palavras-chave como 'to right' ou 'to bottom right', então linear-gradient(to right, ...) é idêntico a linear-gradient(90deg, ...). Arraste o controle deslizante de Ângulo ou clique em uma seta de direção acima e o valor atualiza em tempo real. O CSS de saída é atualizado instantaneamente para você copiar e colar em qualquer folha de estilos ou framework.

Em 2026, não. linear-gradient, radial-gradient e conic-gradient são suportados sem prefixo em todos os navegadores atuais, então um simples background: linear-gradient(...) é suficiente. Você só adicionaria -webkit- para Safari/iOS muito antigos (antes de 2017) ou WebView legado do Android. Marque 'Adicionar prefixo -webkit-' na saída CSS e a ferramenta gera uma linha de fallback convertida corretamente acima da linha padrão. A conversão de ângulo (90deg vira 270deg na versão webkit) é feita automaticamente.

Use os utilitários de gradiente: uma classe de direção mais as cores from-, via- e to-, ex.: bg-gradient-to-r from-indigo-500 to-pink-500. Para cores exatas, use valores arbitrários: bg-gradient-to-r from-[#6366f1] to-[#ec4899]. Alterne a saída para a aba Tailwind para copiar as classes do seu gradiente atual, incluindo um valor arbitrário bg-[linear-gradient(...)] para gradientes radiais e cônicos, para os quais o Tailwind não tem atalho nomeado. A maioria dos recursos sobre gradientes no Tailwind não cobre esse caso.

Clique em Baixar PNG. A ferramenta pinta seu gradiente exato em um canvas HTML a 1600x900 e salva como .png — ideal para fundo de slide, banner de redes sociais ou mockup de design. Tudo é renderizado no seu navegador, sem upload. Ao contrário do TinyWow, que exige upload para um servidor, ou do Adobe Express, que coloca a exportação PNG atrás de uma assinatura, aqui não há risco de privacidade e nenhum custo. Precisa de outro tamanho? Redimensione ou corte o PNG em qualquer editor de imagens depois.

Clique em 'A partir da imagem' e escolha uma foto. A ferramenta lê os pixels localmente, encontra as cores mais frequentes e gera um gradiente a partir delas — uma forma rápida de combinar a paleta de uma foto de marca ou produto. Sua imagem nunca sai do dispositivo; a análise é feita no navegador e os dados são descartados em seguida. Ao contrário do Adobe Color ou do Coolors, que exigem upload ou conta para extrair paletas, tudo fica privado no seu computador. Você pode ajustar as paradas extraídas, mudar o ângulo ou alternar para radial ou cônico.

Um gradiente cônico gira as cores em torno de um ponto central em vez de ao longo de uma linha, então a transição varre como o ponteiro de um relógio. conic-gradient(from 0deg, red, yellow, green, blue, red) cria uma roda de cores completa. São ideais para gráficos de pizza, gráficos de rosca, anéis de progresso, seletores de cor e efeitos de brilho angular. O suporte nos navegadores está consolidado desde 2021 no Chrome, Firefox, Safari e Edge sem prefixo. Selecione Cônico acima, defina o ângulo inicial e a posição central e experimente. A maioria das ferramentas de gradiente não suporta cônico.

Dê a uma parada um valor alfa. Reduza o controle deslizante de Opacidade em uma parada e o CSS muda para rgba(). Por exemplo, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) cria uma transição de transparente para 60% preto — o clássico scrim atrás de texto sobre uma foto. Dica: faça a transição entre a mesma cor (de transparente para sólido da mesma tonalidade) para evitar um meio-tom acinzentado e feio que os navegadores produzem ao fazer fade entre duas cores totalmente transparentes e diferentes. A ferramenta gera o rgba automaticamente quando você ajusta a opacidade de uma parada.

O gerador de gradiente do UtiloKit cobre tudo que essas ferramentas fazem — tipos linear, radial e cônico, editor de múltiplas paradas, cópia de código — além de saída em Tailwind CSS, download de PNG, extração de gradiente a partir de imagem, links compartilháveis e suporte a gradientes animados. O cssgradient.io não tem suporte a gradiente cônico e não gera saída em Tailwind. O editor de gradiente do Colorzilla é uma extensão de navegador e não exporta PNG nem Tailwind. Tudo aqui roda no seu navegador sem upload, sem cadastro e sem anúncios bloqueando recursos.

Sim. A ferramenta é totalmente responsiva e funciona em qualquer navegador móvel moderno. Abra no Safari do iPhone ou no Chrome do Android, monte seu gradiente e copie o CSS direto para a área de transferência. Como tudo roda no lado do cliente, não é necessário baixar nada e funciona mesmo em conexões móveis lentas depois que a página carrega. O editor de paradas com arrastar e soltar se adapta ao toque, então criar gradientes com múltiplas paradas no celular é simples.