Gerador de gradiente CSS
Crie um gradiente linear, radial ou cônico, veja a atualização ao vivo e copie a regra CSS de background.
Funciona inteiramente no seu navegador
Paradas de cor
Predefinições
As cores das paradas podem ser qualquer cor que o seu navegador entenda (HEX, nomes, rgb(), hsl(), oklch()). Até 10 paradas. As posições são porcentagens; o resultado é CSS puro, sem prefixos de navegador.
Como criar um gradiente CSS
- Escolha Linear, Radial ou Cônico, ou comece por uma predefinição.
- Defina o ângulo ou a posição e depois edite as paradas de cor: mude cada cor e posição, adicione paradas e mova-as para cima ou para baixo.
- Clique em Copiar CSS e cole a regra na sua folha de estilos. Marque a opção de cor de reserva se quiser uma linha com cor sólida antes dela.
Como funciona um gradiente CSS
Um gerador de gradiente CSS cria uma imagem que o próprio navegador desenha, então ela se ajusta a qualquer tamanho e não custa nenhum download. Um gradiente linear mistura cores ao longo de uma linha definida por um ângulo. Um gradiente radial mistura a partir de um ponto central, em círculo ou elipse. Um gradiente cônico gira as cores em volta de um centro como o ponteiro de um relógio, o que o torna a escolha natural para gráficos de pizza e rodas de cores.
Cada parada de cor é uma cor mais uma posição ao longo da linha do gradiente, escrita em porcentagem. Entre duas paradas, o navegador faz uma transição suave. Se duas paradas têm a mesma posição, a transição não tem largura e você obtém uma borda marcada. Se uma parada fica antes da anterior, os navegadores a tratam como se estivesse na posição da parada anterior, e é por isso que esta ferramenta permite reordenar e ordenar as paradas.
A regra é escrita como background:, então funciona em qualquer elemento. Os gradientes são desenhados no fundo, então um texto sobre eles exige o mesmo cuidado com contraste que um texto sobre uma cor sólida: confira separadamente as partes mais clara e mais escura da transição.
Dicas
- Escolha cores de parada que combinem com o Gerador de paleta de cores.
- Converta uma parada entre HEX, RGB e HSL no Conversor de cores e contraste.
- Vai publicar a folha de estilos? Reduza o tamanho dela com Minificar e embelezar CSS.
Perguntas frequentes
O que significa o ângulo em um gradiente linear?
0deg aponta para cima, então o gradiente vai da borda de baixo para cima. 90deg vai da esquerda para a direita, 180deg de cima para baixo, e 270deg da direita para a esquerda. 360deg é a mesma direção de 0deg. A ferramenta escreve o número que você digitar com a unidade deg.
Como faço uma borda marcada em vez de uma transição suave?
Dê a mesma posição a duas paradas vizinhas. Por exemplo, vermelho em 50% seguido de azul em 50% troca de cor na metade, sem transição. A predefinição Listras marcadas mostra isso.
O que a opção de repetição faz?
Ela escreve repeating-linear-gradient, repeating-radial-gradient ou repeating-conic-gradient. O padrão entre a primeira e a última parada é repetido, então só aparece quando a última parada fica antes de 100%. Experimente paradas em 0%, 10% e 20% para obter listras.
Para que serve a linha com cor sólida de reserva?
Um navegador que não consegue ler o gradiente ignora essa linha e fica com a anterior. Os navegadores que suportam gradientes, quase todos os que estão em uso, a substituem. A cor de reserva é a cor da sua primeira parada.
Quais formatos de cor são aceitos?
Qualquer coisa que a propriedade CSS color aceite no seu navegador: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) ou oklch(0.5 0.2 260). Digitar outra coisa mostra uma mensagem e mantém na tela o último gradiente válido.
Um gradiente cônico precisa de posição?
Ele sempre tem um centro, e esta ferramenta o escreve em porcentagens, então 50% 50% é o meio da caixa. O ângulo inicial gira o ponto onde a varredura de cores começa, medido no sentido horário a partir do topo.