Ir para o conteúdo
TextArray
Totalmente local

Gerador de gradiente CSS

Gere declarações CSS de gradiente linear e radial com cores e ângulos personalizados.

Saída

Gerador de gradiente CSS

Um gerador de gradiente CSS cria declarações de gradiente de fundo em segundos. Gradientes lineares fluem em uma única direção, perfeitos para fundos sutis ou sobreposições atraentes. Gradientes radiais emanam de um ponto central, ideais para efeitos de destaque ou transições suaves de cores. Escolha o tipo de gradiente, defina o ângulo para gradientes lineares (0–360 graus) e escolha duas cores – códigos hexadecimais, RGB, RGBA ou cores nomeadas, tudo funciona. A ferramenta gera uma propriedade de fundo CSS completa pronta para colar em sua folha de estilo.

Os gradientes são um dos elementos de design mais versáteis do CSS moderno. Eles reduzem o tamanho do arquivo em comparação com os planos de fundo da imagem, são dimensionados infinitamente e têm animação suave nos navegadores. A visualização ao vivo mostra exatamente a aparência do seu gradiente conforme você ajusta cores e ângulos. Copie a saída e aplique-a a qualquer elemento: um plano de fundo de página, um botão, uma seção de destaque ou uma sobreposição de cartão.

Tudo é executado no seu navegador, portanto, suas escolhas e configurações de cores permanecem privadas. Nenhum dado é enviado para lugar nenhum. A ferramenta também funciona offline, então você pode gerar gradientes em qualquer lugar, a qualquer hora. Esteja você projetando um site, prototipando um aplicativo ou apenas experimentando combinações de cores, este gerador acelera seu fluxo de trabalho. Ajuste o ângulo, troque cores e veja a atualização do CSS instantaneamente.

FAQ

O que é um gradiente CSS?
Um gradiente CSS é uma transição suave de cores renderizada diretamente pelo navegador. Transição de gradientes lineares ao longo de uma linha; gradientes radiais emanam de um ponto central. Ambos são leves, escaláveis e podem ser animados.
Que ângulo devo usar para diferentes direções?
Para gradientes lineares: 0° é da esquerda para a direita, 90° é de cima para baixo, 180° é da direita para a esquerda, 270° é de baixo para cima. Qualquer ângulo entre 0 e 360 graus funciona. Gradientes radiais não usam um ângulo.
Posso usar qualquer formato de cor?
Sim. Códigos hexadecimais (#FF0000), RGB (rgb(255, 0, 0)), RGBA com transparência (rgba(255, 0, 0, 0.5)), HSL e cores nomeadas (vermelho, azul) funcionam em gradientes CSS.
Meus dados de cores são enviados para algum lugar?
Não. Esta ferramenta funciona inteiramente no seu navegador. Suas cores, ângulos e configurações nunca saem do seu dispositivo.