Gerador de gradiente CSS
Escolha o tipo de gradiente, a direção e as cores. Ajuste cada parada de cor com o seletor e o controle deslizante e adicione mais com “+ Parada de cor”. O gerador escreve o gradiente em CSS curto e válido e inclui uma cor de fallback sólida em background-color, para o texto continuar legível mesmo sem o gradiente.
Fonte: css-images-3, § 3.1, W3C – CSS Images Module Level 3: Linear Gradients. Atualizado em: .
Como o cálculo é feito
Três tipos de gradiente
| Função | Gradiente | Padrão (omitido) |
|---|---|---|
linear-gradient() | ao longo de uma reta no ângulo escolhido | 180deg = de cima para baixo |
radial-gradient() | do centro para fora | elipse, centralizada, até o canto mais distante |
conic-gradient() | em volta do centro, como um gráfico de pizza | a partir de 0deg (topo), sentido horário |
No gradiente linear, o ângulo define a direção: 0deg para cima, 90deg para a direita, 180deg para baixo. “Repetir” gera repeating-linear-gradient() e variantes: o padrão entre a primeira e a última parada se repete – ótimo para listras.
Como criar um gradiente CSS
- Escolha o tipo – linear, radial ou cônico – e a direção, o ângulo inicial ou a forma.
- Defina as paradas de cor com o seletor e o controle deslizante e adicione mais; “Repetir” cria listras.
- Copie a declaração CSS com a cor de fallback ou só o gradiente para background-image.
Paradas de cor e posições que faltam
As posições são opcionais. Quando faltam, vale a especificação do W3C (CSS Images, “Coloring the Gradient Line”): a primeira parada fica em 0%, a última em 100% e as sem posição no meio são distribuídas por igual. Se uma posição for menor que uma anterior, ela sobe até ela – é assim que se fazem bordas nítidas. Duas posições seguidas (red 0% 50%) criam uma faixa de cor sólida. A tabela mostra a posição que o navegador realmente usa.
Por que uma cor de fallback?
Gradientes são imagens. Se a imagem não é desenhada – no modo de cores forçadas, por exemplo, ou por um erro de digitação no valor –, sobra só o background-color. O gerador usa ali a média das cores ponderada pela área.
Exemplo linear-gradient(90deg, #3B82F6 0%, #9333EA 100%): cada cor cobre metade. Vermelho (59 + 147) ÷ 2 = 103, verde (130 + 51) ÷ 2 = 90,5 ≈ 91, azul (246 + 234) ÷ 2 = 240 – cor de fallback #675BF0. Confira o contraste do texto com essa cor e com as partes mais claras e mais escuras do gradiente.
Encontre cores para o gradiente com o gerador de paleta de cores, converta entre HEX e RGB com o conversor de cores e crie sombras com o gerador de box-shadow CSS.
Perguntas frequentes
Como fazer um gradiente no CSS?
Com background-image: linear-gradient(90deg, #3B82F6, #9333EA); – ou pelo atalho background. Antes, coloque um background-color de fallback. O gerador entrega as duas linhas prontas para copiar.
Como ter bordas nítidas em vez de transições suaves?
Dê a mesma posição a duas paradas, ex.: red 50%, blue 50%, ou duas posições a uma cor: red 0% 50%, blue 50% 100%. Com “Repetir”, isso vira listras.
O conic-gradient funciona em todos os navegadores?
Em todos os navegadores atuais, sim (Chrome e Edge desde a versão 69, Firefox desde a 83, Safari desde a 12.1). Em navegadores muito antigos, a cor de fallback evita que a área fique vazia.
Posso usar cores transparentes?
Sim. Digite uma parada em rgba() ou em HEX de 8 dígitos, ex.: rgba(0, 0, 0, 0.5). A prévia mostra a transparência sobre um xadrez. A cor de fallback é sempre sólida.
Como mudar a direção de um gradiente linear?
Pelo ângulo: 0deg aponta para cima, 90deg para a direita e 180deg (padrão) para baixo. linear-gradient(90deg, …) equivale a linear-gradient(to right, …).
Fontes e base legal
- css-images-3, § 3.1: W3C – CSS Images Module Level 3: Linear Gradients
- css-images-3, § 3.2: W3C – CSS Images Module Level 3: Radial Gradients
- css-images-3, § 3.4.1: W3C – CSS Images Module Level 3: Gradient Color-Stops
- css-images-4, § 3.3: W3C – CSS Images Module Level 4: Conic Gradients
- MDN Web Docs – linear-gradient()
- MDN Web Docs – radial-gradient()
- MDN Web Docs – conic-gradient()
Última atualização: · Princípios editoriais
Ferramentas relacionadas
- Gerador de box-shadow CSSCrie sombras CSS com controles: várias sombras, deslocamento, desfoque, expansão, cor com transparência, inset e modelos – prévia ao vivo e CSS para copiar.
- Gerador de border-radius CSSArredonde cantos com controles: todos juntos ou um a um, em px ou %, elípticos com 8 valores – forma abreviada mais curta, prévia ao vivo e CSS para copiar.
- Gerador de paleta de coresGere cores que combinam a partir de uma cor base: complementar, análoga, triádica, quadrado, complementar dividida ou monocromática, com HEX, RGB e HSL.
- Conversor de cores: HEX, RGB, HSL, HSV, CMYKConverta cores: HEX para RGB, RGB para HEX, HSL, HSV, HWB e CMYK. Digite em qualquer formato ou use o seletor de cores e copie o resultado, tudo no navegador.
- Qual é o meu endereço IP?Mostra na hora seu endereço IP público, detecta se é IPv4 ou IPv6 e explica a diferença. Grátis – seu IP não é armazenado.
- Gerador de CPF e CNPJ válido para testesGerador de CPF e CNPJ válido para testes, inclusive CNPJ alfanumérico, e validador de dígitos verificadores. Grátis, sem cadastro, tudo no seu navegador.
- Gerador JSON-LDGerador JSON-LD para Schema.org: preencha artigo, FAQ, produto, negócio local ou organização e copie o código pronto, com verificação de erros embutida.
- Converter px em remConverter px em rem com seu próprio tamanho base, além de em, pt, porcentagem e vw, e uma tabela de tamanhos de fonte comuns. Grátis e sem cadastro.
- Calculadora CSS clampCalculadora CSS clamp para tamanhos de fonte e espaçamentos fluidos: informe valor mínimo, máximo e faixa de viewport e copie o clamp() pronto.