Ir para o conteúdo
UtiliLab

Gerador de Gradiente CSS: Linear, Radial e Cônico

Arraste os pontos de cor na barra, ajuste o tipo e o ângulo e copie o CSS.

Processado no seu navegador — nada é enviado ou armazenado.

Modelos:

Pontos de cor (2)

Clique na barra para adicionar uma cor; arraste os marcadores para mudar a posição.

Opacidade100%
%

Tipo

°

CSS

background-color: #3298ff;
background-image: linear-gradient(90deg, #635bff, #00d4ff);

Como usar

  • Escolha o tipo: linear, radial ou cônico.
  • Clique na barra de cores para adicionar um ponto; arraste para mudar a posição; use as setas do teclado para ajuste fino.
  • Selecione um ponto para mudar a cor e a transparência, ou remova-o (o mínimo são duas cores).
  • Ajuste o ângulo, a forma ou o centro e copie o CSS.

O código gerado

  • Sintaxe padrão, sem prefixos -webkit-: os navegadores atuais não precisam deles.
  • Valores que o CSS já assume são omitidos (ângulo de 180°, centro em 50% 50%, posição 0% e 100% nas pontas).
  • Uma cor de fundo de reserva (a média das cores) vem antes, para o caso de o gradiente não ser desenhado.

Conteúdo e funcionamento revisados pela Equipe UtiliLab em . Consulte nossa metodologia de revisão.

Perguntas frequentes

O código gerado funciona em todos os navegadores?

Sim. O CSS sai na sintaxe padrão, sem prefixos, que Chrome, Edge, Firefox e Safari entendem nas versões atuais — inclusive no celular.

Qual a diferença entre os três tipos?

O linear muda de cor ao longo de uma reta. O radial parte de um centro para fora, em círculo ou elipse. O cônico gira em volta do centro, como um relógio — bom para gráficos de pizza e rodas de cor.

Como faço uma transição seca, sem degradê?

Coloque dois pontos de cores diferentes na mesma posição. O navegador troca de uma cor para a outra de uma vez.

Ferramentas relacionadas

Gerador de Paleta de Cores

Gere paletas análogas, complementares, triádicas e tetrádicas e exporte em HEX, RGB ou CSS.

Gerador de Box Shadow

Ajuste deslocamento, desfoque, propagação, cor e opacidade da sombra e copie o box-shadow.

Gerador de Border Radius

Arredonde cada canto separadamente, em px ou %, e copie o border-radius mais curto.

Seletor de Cores

Escolha uma cor no quadro de saturação e brilho e copie em HEX, RGB, HSL ou HSV.