Gerador de Gradiente CSS
Privado por design — roda inteiramente no seu navegador
Crie gradientes CSS lineares e radiais visualmente, no seu navegador. O Toova deixa você posicionar color stops, ajustar ângulos, mudar tipos e exportar CSS pronto para colar — tudo sem enviar nada para um servidor.
Gradientes lineares, radiais e cônicos
Gradientes lineares se movem ao longo de um eixo reto definido por um ângulo ou palavra-chave de direção. Gradientes radiais se expandem a partir de um ponto central. Gradientes cônicos varrem ao redor de um ângulo — perfeitos para fundos estilo gráfico de pizza ou efeitos de roda de cores. O Toova expõe os três com controles visuais, para que você possa construir o gradiente que quer sem memorizar cada variante da sintaxe CSS.
Color stops e easing
Arraste color stops ao longo da barra de gradiente para controlar onde cada cor começa e termina. Adicione quantos stops precisar — o Toova não tem limite. Use os presets de easing para introduzir interpolação não linear, o que evita o cinza barrento que assola gradientes simples de duas cores. A saída CSS usa propriedades padrão suportadas em todo navegador moderno.
Geração só no navegador
Todo gradiente é gerado localmente no seu navegador. As cores que você escolhe, os stops que posiciona, o CSS de saída — nada disso sai da página. É exagero para gradientes, mas significa que a ferramenta é rápida e confiável, e a página funciona offline após o primeiro carregamento. A aba de Rede ficará vazia durante o uso.
Perguntas Frequentes
- Quando devo usar um gradiente cônico?
- Gradientes cônicos são perfeitos para efeitos de gráfico de pizza, rodas de cores e fundos giratórios abstratos. Eles varrem ao redor de um ponto central, o que nem gradientes lineares nem radiais conseguem fazer. O suporte de navegadores agora é sólido em motores modernos.
- Como evito o meio barrento em gradientes de duas cores?
- Adicione um stop intermediário com uma cor perceptualmente equilibrada, ou escolha cores com luminosidade similar. Misturar cores complementares pelo ponto médio RGB produz cinza — escolher o ponto médio manualmente em OKLCH evita isso.
- Posso exportar para outros formatos?
- A saída é CSS padrão, que funciona diretamente em qualquer contexto web. Para ferramentas de design, copie color stops individuais e replique o gradiente no Figma ou Sketch.
- Ele suporta transparência?
- Sim. Qualquer color stop pode ter um canal alfa. Útil para desvanecer bordas em segundo plano ou sobrepor gradientes com stops semitransparentes.
- Meus dados são enviados para algum lugar?
- Não. A geração roda inteiramente no seu navegador.