Skip to content
Zoyku

Gerador de gradientes CSS

Mistura de duas a cinco cores em gradientes CSS lineares, radiais ou cônicos, com pré-visualização ao vivo, código pronto para colar e paletas harmonizadas.

Paradas de cor

Paletas

Ângulo: 135°
Pré-visualização
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° aponta para cima e 90° para a direita — o ângulo avança no sentido horário.

Esta ferramenta roda inteiramente no seu navegador. Seus dados nunca saem do seu dispositivo e não são enviados a nenhum servidor.

Como usar

  1. 1Defina de duas a cinco cores, ou comece de uma paleta predefinida.
  2. 2Escolha o tipo de gradiente e ajuste ângulo ou forma; fixe posições se quiser.
  3. 3Copie o bloco CSS e cole na sua folha de estilos.

Gerador de gradientes CSS

Escolha de duas a cinco cores, selecione linear, radial ou cônico e arraste o ângulo — a pré-visualização atualiza enquanto você digita e o CSS está sempre a uma cópia de distância. Deixe a posição de uma parada em branco e ela é colocada automaticamente como o CSS faria; defina porcentagens exatas para cortes duros e misturas descentralizadas.

A saída é um bloco de produção de verdade: uma linha de fallback com cor sólida para navegadores antigos, uma linha com prefixo -webkit- para builds antigas do WebKit e a sintaxe padrão por último. O botão de harmonização aleatória gira os matizes da paleta no espaço HSL, então cada embaralhada continua equilibrada em vez de virar bagunça.

Perguntas frequentes

Por que o CSS inclui uma linha com prefixo -webkit-?

É uma linha de compatibilidade para navegadores WebKit antigos (era do Safari 5–6, mais ou menos) que só entendiam -webkit-linear-gradient. Todo navegador da última década lê a linha padrão, então você pode apagar a prefixada se não precisar dar suporte a essas versões — mantê-la custa uma linha; removê-la não custa nada.

O que significa o ângulo em um gradiente linear?

É a direção em que o gradiente avança, medida no sentido horário a partir de cima: 0deg vai de baixo para cima, 90deg da esquerda para a direita, 180deg de cima para baixo. A ferramenta normaliza qualquer ângulo (−45 vira 315) e a convenção de direção oposta da sintaxe antiga já vem resolvida na linha -webkit-.

Quando usar um gradiente cônico em vez de linear ou radial?

O cônico varre a cor ao redor de um ponto central — é assim que se fazem gráficos de pizza, mostradores de ângulo e efeitos de explosão solar. O linear mistura ao longo de uma reta e o radial se irradia do centro para fora. Mesmas paradas, geometria completamente diferente: troque o tipo e observe a pré-visualização em vez de adivinhar.

Ferramentas relacionadas

Todas as ferramentas de Utilidades →

Verificador de contraste

Calcule a taxa de contraste WCAG entre duas cores com selos AA e AAA para texto normal e grande, além de pré-visualização ao vivo. Tudo no navegador.

Todas as ferramentas →

Conversor de cores

Cole uma cor em hex, rgb() ou hsl() e receba os três formatos mais uma fileira de tons e sombras pronta para o seu design system.

Todas as ferramentas →

Seletor de cores

Escolha uma cor na paleta ou capture uma direto da tela com a API EyeDropper — hex, RGB e HSL copiáveis num clique.

Todas as ferramentas →

Borda de imagem

Adicione uma borda de cor sólida ou transparente a uma imagem ou a um lote — pré-visualização ao vivo, saída em PNG ou JPG, tudo no navegador.

Todas as ferramentas →

Incorporar esta ferramenta

Coloque esta ferramenta no seu site com uma linha — ela roda no navegador do visitante.

<iframe src="https://zoyku.com/pt/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% local processing