Gerador de gradientes CSS

O que é Gerador de gradientes CSS?

O Gerador de Gradientes CSS é uma ferramenta on-line gratuita para web designers e desenvolvedores front-end que precisam de um gradiente rápido sem escrever a sintaxe à mão. Escolha um gradiente linear, radial ou cônico, defina o ângulo em graus para os tipos linear e cônico e defina paradas de cor, cada uma com uma cor HEX e uma porcentagem de posição. Enquanto você edita, uma pré-visualização ao vivo mostra o resultado e a regra CSS background correspondente se atualiza instantaneamente, para que você possa copiá-la direto para uma folha de estilos. Use-o para criar botões, fundos de destaque, cartões e sobreposições, ou para aprender como funcionam as funções linear-gradient(), radial-gradient() e conic-gradient().

Como usar Gerador de gradientes CSS

1. Escolha o tipo de gradiente: Linear, Radial ou Cônico.
2. Para um gradiente linear ou cônico, defina o ângulo em graus (0-360); o radial usa um círculo centralizado e ignora o ângulo.
3. Edite cada parada de cor: digite ou escolha uma cor HEX e defina sua posição como porcentagem (0-100).
4. Clique em Adicionar parada para inserir outra cor, ou no ícone de lixeira para remover uma parada (um mínimo de duas paradas é mantido).
5. Observe a caixa de pré-visualização ao vivo se atualizar e copie a regra CSS background gerada com o botão de copiar.

Exemplos

Linear, 90deg, #4f86f7 em 0% e #9333ea em 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, paradas #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

Perguntas frequentes

Quais tipos de gradiente são suportados?

Três: linear-gradient (com um ângulo em graus), radial-gradient (um círculo centralizado) e conic-gradient (com um ângulo inicial). Alterne entre eles com o seletor de tipo e o CSS se atualiza instantaneamente.

Como funcionam as paradas de cor e as posições?

Cada parada tem uma cor e uma porcentagem de posição de 0 a 100. As paradas são escritas no CSS na ordem em que aparecem na lista, exatamente como o navegador as interpreta, então você controla a ordem diretamente. Você pode adicionar paradas com Adicionar parada e removê-las até um mínimo de duas.

Posso escolher as cores visualmente em vez de digitar o HEX?

Sim. Clique no pequeno chip de cor ao lado de cada parada para abrir o seletor de cores nativo do seu navegador, ou digite um valor HEX como #4f86f7 diretamente no campo de cor. A pré-visualização e o CSS se atualizam conforme você altera.

Por que o campo de ângulo desaparece nos gradientes radiais?

Aqui, um gradiente radial é desenhado como um círculo centralizado, que não usa ângulo, por isso o campo de ângulo só aparece nos tipos linear e cônico, onde ele muda a direção.

Minhas cores ou meu CSS são enviados para algum lugar?

Não. O gradiente é construído inteiramente no seu navegador com cálculos locais de strings e cores — nenhuma cor, CSS ou configuração é enviada a um servidor, então ele funciona off-line e mantém seu trabalho privado.