Gerador de gradientes CSS

O que é Gerador de gradientes CSS?

O Gerador de Gradientes CSS é uma ferramenta gratuita no navegador para web designers e desenvolvedores front-end que querem criar gradientes visualmente em vez de escrever a sintaxe à mão. Escolha linear, radial ou cônico — com uma variante repetida opcional — e edite as paradas de cor em uma barra de pré-visualização arrastável ou em linhas por parada com campos de cor HEX e posição. Gradientes radiais oferecem forma círculo/elipse, uma palavra-chave de tamanho (closest-side, closest-corner, farthest-side, farthest-corner) e um centro at X% Y%, enquanto os cônicos aceitam um ângulo inicial e um centro. Você pode empilhar várias camadas de gradiente em um único fundo separadas por vírgulas, gerar um gradiente aleatório, aplicar paletas predefinidas, girar o matiz de cada parada e copiar a regra background pronta para colar.

Como usar Gerador de gradientes CSS

1. Escolha o tipo de gradiente — Linear, Radial ou Cônico — e ative Repetido nas opções para um padrão repetido.
2. Arraste as paradas pela barra de pré-visualização para reposicioná-las, clique em um ponto vazio da barra para adicionar uma parada ou clique duas vezes em uma parada para removê-la.
3. Ajuste cada parada com seus campos de cor HEX e posição, ou use o conta-gotas (onde houver suporte) para capturar uma cor da tela.
4. Para gradientes radiais, defina a forma (círculo ou elipse), uma palavra-chave de tamanho e o centro X/Y; para os cônicos, o ângulo inicial e o centro.
5. Adicione mais camadas para empilhar gradientes em um único fundo, tente Aleatório, aplique uma paleta ou gire todos os matizes de uma vez.
6. Copie a regra CSS background gerada e cole na sua folha de estilos.

Exemplos

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

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

Radial, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Camada 1 linear 90deg; Camada 2 radial circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Perguntas frequentes

Quais tipos de gradiente e opções são suportados?

Gradientes lineares, radiais e cônicos, cada um com uma variante repetida opcional. O radial adiciona forma círculo/elipse, uma palavra-chave de tamanho (closest-side, closest-corner, farthest-side, farthest-corner) e um centro at X% Y%; o cônico adiciona um ângulo inicial e um centro. Você também pode empilhar várias camadas em um único fundo.

Como funciona a barra de paradas arrastável?

Arraste qualquer parada pela barra para mudar sua posição, clique em uma parte vazia da barra para inserir uma nova parada com cor interpolada e clique duas vezes em uma parada para removê-la (mantém-se um mínimo de duas). Cada parada também tem campos de cor HEX e posição abaixo da barra.

Posso capturar uma cor da minha tela?

Sim, em navegadores compatíveis com a API EyeDropper. Quando disponível, um botão de conta-gotas aparece ao lado de cada parada; clique e escolha qualquer pixel da tela. Você sempre pode digitar um valor HEX ou usar o chip de cor nativo.

O que fazem Aleatório, as paletas e girar o matiz?

Aleatório substitui a camada ativa por um novo gradiente aleatório, as paletas trocam as paradas da camada ativa por um conjunto de cores selecionado, e Girar matiz desloca o matiz de cada parada de cada camada de uma vez. Eles só mudam o gradiente quando você clica.

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.