Gerador de gradientes CSS

Defina a propriedade background (ou background-image) com uma função de gradiente. A mais simples é um gradiente linear de duas cores: background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%); — que pinta uma mistura da esquerda para a direita, de índigo para rosa. Escolha as suas cores e o ângulo acima, e copie a linha background pronta para colar diretamente na sua folha de estilos. Não é necessário escrever a sintaxe à mão — o gerador constrói-a à medida que arrasta cada paragem para o lugar.

Um linear-gradient mistura cores ao longo de uma linha reta com um ângulo definido por si (por ex. 90deg = da esquerda para a direita). Um radial-gradient mistura a partir de um ponto central em círculos ou elipses, como um foco de luz. Um conic-gradient distribui as cores em redor de um ponto central como os ponteiros de um relógio, o que o torna perfeito para rodas de cores e gráficos de setores. Esta ferramenta cria os três tipos; alterne com os botões Linear / Radial / Cónico. A maioria das ferramentas gratuitas de gradiente, como o gerador de fundos do Canva, só oferecem gradientes lineares, e o cssgradient.io não suporta gradientes cónicos de todo.

Aplique um gradiente ao fundo de qualquer elemento. Para um fundo de página completa experimente: body { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); min-height: 100vh; }. Como um gradiente conta como uma imagem, pode também adicionar background-attachment: fixed; para que permaneça fixo enquanto a página faz scroll. Crie-o visualmente acima e copie o CSS. Não precisa do Figma, Canva ou qualquer ferramenta de design. Funciona da mesma forma em todos os navegadores modernos sem prefixos em 2026.

Adicione paragens de cor extra, cada uma com a sua própria posição. Clique em qualquer ponto na barra de gradiente (ou no botão + Adicionar paragem) para colocar uma nova paragem, e depois arraste-a para onde pretende. Três cores têm este aspeto: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%). Não há limite real — adicione tantas paragens quantas o seu design necessitar. Ao contrário do coolors.co, que apenas mostra paletas de cores sem o CSS real, ou do Canva, que bloqueia a edição de gradientes por trás de uma conta, aqui o CSS de produção com paragens ilimitadas é gerado imediatamente.

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. Pode também utilizar palavras-chave como 'to right' ou 'to bottom right', pelo que linear-gradient(to right, ...) é idêntico a linear-gradient(90deg, ...). Arraste o controlo deslizante de Ângulo ou clique numa seta de direção acima e o valor atualiza em tempo real. O CSS de saída atualiza instantaneamente para que possa copiar e colar diretamente 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, pelo que um simples background: linear-gradient(...) é suficiente. Só adicionaria -webkit- para versões muito antigas do Safari/iOS (anteriores a 2017) ou para WebViews Android legados. Ative 'Adicionar prefixo -webkit-' na saída CSS e a ferramenta emite uma linha de fallback corretamente convertida acima da linha padrão. A conversão de ângulo (90deg torna-se 270deg na versão webkit) é tratada automaticamente.

Utilize os utilitários de gradiente: uma classe de direção mais as cores from-, via- e to-, por ex. bg-gradient-to-r from-indigo-500 to-pink-500. Para cores exatas utilize valores arbitrários: bg-gradient-to-r from-[#6366f1] to-[#ec4899]. Mude a saída para o separador 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 de gradiente para Tailwind não abrange este caso específico.

Clique em Descarregar PNG. A ferramenta pinta o seu gradiente exato num canvas HTML a 1600x900 e guarda-o como .png, ideal para fundo de diapositivos, banner para redes sociais ou maquete de design. É renderizado inteiramente no seu navegador, pelo que nada é carregado para servidores. Ao contrário do TinyWow, que exige o carregamento de ficheiros para um servidor, ou do Adobe Express, que coloca a exportação de PNG por trás de uma subscrição paga, aqui não há risco de privacidade nem qualquer custo. Precisa de outro tamanho? Redimensione ou recorte o PNG em qualquer editor de imagens depois.

Clique em 'A partir de imagem' e escolha uma fotografia. A ferramenta lê os pixéis localmente, identifica as cores mais comuns e cria um gradiente a partir delas — uma forma rápida de combinar com uma fotografia de marca ou imagem de produto. A sua imagem nunca sai do dispositivo; é analisada no navegador e descartada imediatamente. Ao contrário do Adobe Color ou do Coolors, que exigem um carregamento ou uma conta para extrair paletas, tudo fica privado na sua máquina. Pode depois ajustar as paragens extraídas, alterar o ângulo ou mudar para radial ou cónico.

Um gradiente cónico distribui as suas cores em redor de um ponto central em vez de ao longo de uma linha, pelo que 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 setores, gráficos de donut, anéis de progresso, seletores de cor e efeitos de brilho angular. O suporte nos navegadores é sólido 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 geração de gradientes não suporta o tipo cónico.

Atribua um valor alfa a uma paragem. Reduza o controlo deslizante de Opacidade numa paragem e o CSS muda para rgba(). Por exemplo, linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) faz uma transição de transparente para 60% de preto — o clássico ecrã escuro atrás do texto sobre uma fotografia. Dica: faça a transição entre a mesma cor (de transparente para sólido de uma só tonalidade) para evitar um ponto médio cinzento baço que os navegadores produzem ao fazer a transição entre duas cores totalmente transparentes diferentes. A ferramenta trata a saída rgba automaticamente quando ajusta a opacidade da paragem.

O gerador de gradientes da UtiloKit cobre tudo o que essas ferramentas fazem — tipos de gradiente linear, radial e cónico, editores multi-paragem, cópia de código — mais saída Tailwind CSS, download de PNG, extração de gradiente a partir de imagem, ligações partilháveis e suporte a gradientes animados. O cssgradient.io não suporta gradientes cónicos e não tem saída Tailwind. O editor de gradientes do Colorzilla é uma extensão de navegador e não exporta PNG nem Tailwind. Tudo aqui funciona no seu navegador sem carregamentos, sem registo e sem anúncios a bloquear funcionalidades.

Sim. A ferramenta é totalmente responsiva e funciona em qualquer navegador móvel moderno. Abra-a no Safari do iPhone ou no Chrome do Android, crie o seu gradiente e copie o CSS diretamente para a área de transferência. Como tudo funciona do lado do cliente, não é necessário nenhum download e funciona mesmo com ligações móveis lentas depois de a página carregar. O editor de paragens por arrastamento adapta-se ao toque, pelo que criar gradientes multi-paragem num telemóvel é simples.