PortuguêsPT

Gerador de degradê CSS (gradiente)

Defina as paradas de cor e o ângulo, e o CSS do degradê fica pronto para copiar.

Seus textos e arquivos não saem do navegador: nada é enviado para nenhum servidor.

Paradas de cor

Clique em um espaço vazio da barra para adicionar uma parada ou arraste uma alça para movê-la.

Código CSS

A linha background-color é uma cor média para ambientes que não conseguem desenhar degradês.

Como usar

  1. Escolha um tipo (linear, radial ou cônico) e ajuste o ângulo ou a posição do centro.
  2. Adicione paradas clicando na barra ou em “Adicionar parada”. Arraste uma alça ou digite uma porcentagem para mover uma parada.
  3. Defina a cor de cada parada na caixa de cor ou digite um código como #rrggbbaa para incluir transparência.
  4. Copie o código CSS e cole na sua folha de estilos. Clique em “Aleatório” para descobrir novas combinações.

Perguntas frequentes

Qual a diferença entre linear, radial e cônico?

O linear mistura as cores ao longo de uma linha reta, o radial espalha as cores a partir de um ponto central e o cônico gira as cores no sentido horário em volta do centro. O cônico funciona bem para gráficos de pizza e rodas de cores.

Para onde aponta o 0deg?

No linear-gradient, 0deg vai de baixo para cima e 90deg da esquerda para a direita. O degradê cônico começa em 0deg, na posição de 12 horas.

Os degradês funcionam em navegadores antigos?

Degradês lineares e radiais funcionam em praticamente todos os navegadores, e os cônicos em navegadores de 2020 em diante. Onde o degradê não pode ser desenhado, aparece a cor reserva do background-color.

Ferramentas relacionadas

Seletor de coresHEX, RGB, HSL e CMYK em um só lugarFiltros CSSDesfoque, brilho, tons de cinza e maisPaleta para Tailwind CSSDe uma cor a uma escala de 50 a 950Arte ASCIITexto e fotos feitos com caracteres

Todas as ferramentas