Ferramentas de design grátis

Gerador de gradiente CSS online gratuito

Crie gradientes lineares, radiais ou cônicos com duas a seis paradas de cor. Visualize o resultado ao vivo, ajuste a direção ou origem relevante e copie CSS pronto para usar sem fazer login.

Bancada CSS interativa

Crie o gradiente

Tipo de gradiente

Ângulo da direção135deg

deg

Paradas de cor

De duas a seis paradas, mantidas em ordem de posição.

Parada 1

Parada 2

Parada 3

Predefinições

Visualização ao vivo

Linear

Saída CSS

.gradient-background {
  background-color: #0F766E;
  background-image: linear-gradient(135deg, #0F766E 0%, #F59E0B 52%, #172033 100%);
}

A visualização e ambas as ações de cópia usam o mesmo valor de gradiente gerado.

Como criar um gradiente CSS

Etapa 1

Escolha o tipo de gradiente

Use linear para uma transição direcional, radial para um efeito a partir do centro ou cônico para uma varredura em torno de uma origem.

Etapa 2

Edite cores, paradas e direção

Informe cores HEX válidas, posicione cada parada e ajuste o ângulo, a forma ou a origem exibida para o tipo selecionado.

Etapa 3

Visualize e copie o CSS

Revise a superfície renderizada pelo navegador e copie a regra completa ou somente a função de gradiente para sua folha de estilo.

Escolha o tipo correto de gradiente CSS

As três funções de gradiente CSS descrevem trajetórias diferentes pelas mesmas paradas de cor ordenadas. Comece pela geometria que corresponde à superfície pretendida.

Gradientes lineares seguem um eixo

Um gradiente linear se move por uma linha reta. Em CSS, 0deg aponta para cima e ângulos crescentes giram no sentido horário; portanto, 90deg aponta para a direita e 180deg para baixo.

Gradientes radiais se expandem a partir de uma origem

Um gradiente radial cresce para fora como um círculo ou elipse. Mova sua origem para posicionar um foco perto do centro, de uma borda ou de um canto.

Gradientes cônicos giram em torno de um ponto

Um gradiente cônico gira as cores em torno de uma origem. Ele funciona bem para varreduras decorativas, mas um fundo CSS sem rótulo não é um gráfico de dados acessível.

Controle paradas de cor, posições e direção

As paradas de cor ancoram as cores em pontos exatos. Sua ordem e espaçamento determinam onde cada transição começa, acelera ou fica mais concentrada.

Use de duas a seis cores HEX opacas

Digite #RGB ou #RRGGBB ou use o seletor de cores nativo. Um rascunho inválido não substitui a última cor válida usada na prévia.

Mantenha as posições das paradas previsíveis

As paradas permanecem em ordem crescente de 0% a 100%. Aproxime paradas vizinhas para uma transição mais rápida ou afaste-as para uma mistura mais longa.

Use predefinições como pontos de partida

Todas as predefinições permanecem editáveis. Inverta a ordem de cores, gere novas cores ou redefina o gradiente inicial sem recarregar a página.

Use o CSS gerado em um layout real

A regra copiada é intencionalmente pequena: um fallback sólido seguido pelo valor exato do gradiente mostrado na prévia.

Mantenha um fallback de fundo sólido

Posicione background-color antes de background-image para que uma cor sólida utilizável permaneça caso a declaração de gradiente não esteja disponível. Revise também esse fallback no contexto.

Aplique o gradiente como imagem de fundo

Gradientes CSS são valores de imagem. Use a função gerada com background-image ou uma abreviação de background, não como valor de background-color.

Revise tamanhos reais de elementos

Um gradiente CSS não tem largura ou altura naturais; ele é renderizado no elemento ao qual é aplicado. Teste-o no cartão, botão, faixa e tamanhos responsivos reais.

Confira a legibilidade e conheça os limites

Uma declaração de gradiente válida ainda pode falhar no contexto. Revise contraste, significado e todos os estados responsivos ou interativos antes de publicá-la.

Teste o texto em todo o gradiente

O contraste pode mudar de um lado da superfície para o outro. Teste o texto nas áreas relevantes menos favoráveis e confira novamente os estados de passar o mouse, foco e selecionado.

Não use um gradiente como único sinal de dados

Imagens de fundo CSS não oferecem texto alternativo nativo. Adicione rótulos, valores ou outra representação acessível sempre que as cores comunicarem significado.

Saiba o que não é exportado

Este gerador focado não cria cores com alfa, gradientes repetidos ou em camadas, espaços personalizados de interpolação, arquivos de imagem ou classes específicas de framework.

Privacidade e limites

O editor funciona nesta aba do navegador. Ele não envia cores nem CSS gerado, e nenhuma conta é necessária.

• Apenas cores opacas #RGB e #RRGGBB; sem controles de alfa ou opacidade.
• Sem gradientes repetidos, em camadas, de malha ou em espaço de cor personalizado.
• Copia apenas CSS padrão; não exporta imagem, SVG, Tailwind ou arquivo CSS.

Perguntas frequentes

Este gerador de gradiente CSS é gratuito?

Sim. Você pode criar, visualizar e copiar gradientes CSS sem se cadastrar, fazer login ou desbloquear o resultado.

Quais tipos de gradiente CSS ele aceita?

O gerador aceita linear-gradient(), radial-gradient() e conic-gradient(). Cada tipo mostra apenas os controles que afetam sua saída.

Quantas paradas de cor posso adicionar?

Você pode usar de duas a seis paradas de cor opacas. Cada parada aceita entrada #RGB ou #RRGGBB e uma posição de 0% a 100%.

O que significam os ângulos de gradiente CSS?

Para gradientes lineares, 0deg aponta para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda. Gradientes cônicos usam o ângulo como rotação inicial em torno da origem selecionada.

Posso alterar a origem radial ou cônica?

Sim. Os modos radial e cônico permitem posicionar a origem no centro, em uma borda ou em um canto. O modo radial também permite escolher círculo ou elipse.

Posso copiar somente o valor do gradiente?

Sim. Copie a regra de classe completa quando precisar de um fallback sólido ou apenas a função de gradiente ao inseri-la em uma declaração existente.

Por que o CSS gerado inclui uma cor sólida de fundo?

A linha background-color fornece um fallback simples antes de background-image aplicar o gradiente. Revise essa cor de fallback em relação a qualquer texto ou controle colocado sobre ela.

Esta ferramenta aceita cores transparentes ou opacidade?

Não. Esta versão aceita intencionalmente apenas cores opacas #RGB e #RRGGBB. Ela não gera gradientes com alfa, repetição, camadas ou espaço de cor personalizado.

Fundos com gradiente CSS são acessíveis?

Um gradiente decorativo pode ser adequado, mas imagens de fundo não são anunciadas por leitores de tela e o contraste pode variar pela superfície. Não use um gradiente como única representação de dados significativos e teste o texto nas áreas relevantes menos favoráveis.

A ferramenta envia ou salva meu gradiente?

Nenhum serviço externo é usado pelo editor. Suas configurações permanecem na aba atual do navegador e são redefinidas quando a página é recarregada.

Ferramentas relacionadas

Sd Ferramentas de design grátis

Escolha e converta cores

Seletor de cores

Escolha uma cor visualmente ou informe um valor HEX; depois, ajuste RGB, HSL e opacidade. Visualize o resultado, compare tons próximos e copie o código de cor exato sem login.

Vd Ferramentas de design grátis

Confira o contraste de cores sólidas

Verificador de contraste de cores

Teste cores de texto e fundo segundo WCAG 2.2 AA e AAA. Veja a proporção de contraste exata, visualize o tamanho e o peso de fonte selecionados e identifique se o par é aprovado.

Gd Ferramentas de design grátis

Crie uma sombra CSS

Gerador de sombra de caixa CSS

Crie sombras CSS em camadas com até quatro camadas editáveis. Ajuste deslocamentos, desfoque, expansão, cor, opacidade e modo inset, visualize o resultado e copie o CSS sem login.

Od Ferramentas de design grátis

Otimize um gráfico SVG

Otimizador de SVG

Envie ou cole marcação SVG, otimize-a localmente com SVGO e compare o código, tamanho do arquivo e resultado visual antes de baixar. Não é necessário login nem envio ao servidor.