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.
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.
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.
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.
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:
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.
- Validar e calcular um dígito de LuhnValide números com o algoritmo de Luhn (módulo 10, ISO/IEC 7812-1) ou calcule o dígito verificador – só confere o formato, direto no navegador.
- Calculadora de proporção (aspect ratio)Calcule a proporção a partir de largura e altura (1920 × 1080 = 16:9), descubra o lado que falta, o valor decimal, o formato padrão mais próximo e o CSS.