CSS Gerador de gradiente grátis

Como funciona

O gerador de gradiente constrói strings de gradiente CSS diretamente no navegador — sem biblioteca, sem servidor, sem envio. Uma função escrita à mão monta a sintaxe correta de linear-gradient, radial-gradient, ou conic-gradient a partir das suas paragens de cor e ângulo em tempo real, depois formata o resultado para o alvo de saída escolhido.

1. 1
   Configure paragens e direção

   Define entre 2 e 6 paragens de cor usando o seletor de cor nativo do navegador, depois posiciona cada paragem ao longo do eixo 0–100% com um controlo de intervalo. Para gradientes lineares e cónicos também escolhe um ângulo (0–360°); para gradientes radiais escolhe a forma (elipse ou círculo) e a palavra-chave de tamanho que controla até onde o gradiente se estende.
2. 2
   O buildCss monta a string de gradiente

   A cada mudança, uma função local buildCss concatena os seus parâmetros na chamada de função CSS correta — por exemplo, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nenhuma biblioteca está envolvida; a string é construída com lógica de template simples de JavaScript e unida diretamente a partir do array de paragens.
3. 3
   A pré-visualização ao vivo renderiza via estilo inline

   A string de gradiente montada é aplicada diretamente a um elemento div como um estilo de fundo inline, para que o próprio mecanismo CSS do navegador renderize a pré-visualização. Não há canvas nem imagem envolvidos — o que você vê é literalmente a propriedade CSS sendo aplicada.
4. 4
   Saída pronta para copiar em quatro formatos

   Um seletor de formato transforma a mesma string de gradiente em CSS simples (background: ...), um bloco CSS com alternativa sólida, uma classe de valor arbitrário Tailwind, ou uma declaração de variável SCSS. Clicar em Copiar escreve a saída selecionada na área de transferência via navigator.clipboard.writeText. O gradiente atual também é codificado no hash da URL para que você possa adicioná-lo aos favoritos ou compartilhá-lo.

Ferramentas relacionadas