Gerador de gradiente CSS
Monte um gradiente a olho e copie o CSS.
Arraste uma alça para mover um ponto, ou clique na barra para adicionar um. As alças também se movem com as setas do teclado.
Pontos de cor
- %
- %
- %
Funciona no navegador. Nada do que você digita é enviado a lugar nenhum.
- Arraste para posicionar os pontos
- Linear, radial e cônico
- 8 modelos prontos
Como criar um gradiente CSS
- Escolha um modelo, ou defina a cor de cada ponto.
- Arraste as alças na barra, e clique na barra para adicionar um ponto.
- Copie o CSS e cole na sua folha de estilo.
Tipos de gradiente comparados
| Tipo | Como se espalha | Função CSS |
|---|---|---|
| Linear | Ao longo de uma linha reta em ângulo | linear-gradient() |
| Radial | A partir de um ponto central | radial-gradient() |
| Cônico | Em torno de um ponto central, como uma roda de cores | conic-gradient() |
Suporte dos navegadores por tipo de gradiente
| Tipo de gradiente | Precisa de pelo menos |
|---|---|
| Linear e radial | Todo navegador atual, até o IE10 com um prefixo |
| Cônico | Chrome 69, Firefox 83, Safari 12.1 |
O CSS que esta página gera sempre começa com uma linha simples de background-color primeiro, então um navegador que não consiga desenhar o gradiente ainda mostra a cor do primeiro ponto em vez de uma caixa vazia.
Dicas para gradientes mais suaves
- Adicione um terceiro ponto no meio para o gradiente parecer duas cores se misturando através de uma terceira, em vez de um degradê plano de dois tons.
- Para uma borda dura em vez de mistura, dê a dois pontos vizinhos a mesma posição.
- 0deg vai de baixo para cima e 90deg vai da esquerda para a direita. Some 180 a qualquer ângulo para inverter a direção de um gradiente sem redigitar cada ponto.
- Combine a forma radial com a caixa: círculo para elementos quadrados, elipse para elementos largos, assim o gradiente não fica esticado.
Perguntas frequentes sobre Gerador de gradiente CSS
Como faço um gradiente em CSS?
Defina a propriedade background como uma função de gradiente, como background: linear-gradient(90deg, #ff7e5f, #feb47b). O primeiro valor é a direção, depois vêm as cores, cada uma com uma posição opcional.
Qual é a diferença entre gradientes linear, radial e cônico?
Um gradiente linear muda de cor ao longo de uma linha reta, um gradiente radial se espalha a partir de um ponto central, e um gradiente cônico gira em torno de um ponto central como uma roda de cores ou um gráfico de pizza.
Para que lado o ângulo aponta?
0deg vai de baixo para cima, 90deg da esquerda para a direita, 180deg de cima para baixo e 270deg da direita para a esquerda. Em gradientes cônicos, o ângulo define onde a rotação começa.
Como fazer uma linha dura entre duas cores?
Dê a dois pontos vizinhos a mesma posição, como vermelho 50% e azul 50%. A cor então muda naquele ponto em vez de misturar.
Gradientes CSS funcionam em todo navegador?
Gradientes lineares e radiais funcionam em todo navegador atual. Gradientes cônicos precisam de Chrome 69, Firefox 83 ou Safari 12.1 em diante. O CSS aqui começa com uma linha de cor sólida como alternativa.
Posso animar um gradiente CSS?
Você pode animar background-position ou background-size em um gradiente maior que a caixa para um efeito de movimento. Animar as próprias cores dos pontos precisa da regra CSS @property ou de um pequeno script, já que os navegadores não conseguem interpolar entre dois gradientes completos sozinhos.
Um gradiente pode ser usado como cor de texto?
Sim. Copie o CSS do gradiente daqui para um background, depois adicione background-clip: text e color: transparent ao elemento de texto para o gradiente aparecer através das letras em vez de preencher uma caixa.