Docs executáveis de CSS: Degradê CSS

Q: Como fazer um degradê radial no CSS?

Use background-image: radial-gradient(#93c5fd, #1e3a8a);. Acrescente um formato e uma posição antes das cores, como radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: Qual a diferença entre circle e ellipse no radial-gradient?

ellipse (o padrão) se estica nas proporções da caixa, então fica largo em uma caixa larga. circle mantém o degradê redondo, seja qual for o formato da caixa.

Q: Como definir a direção de um linear-gradient?

Coloque uma direção ou um ângulo primeiro: linear-gradient(to right, red, blue) ou linear-gradient(45deg, red, blue). O padrão é to bottom (180deg); 0deg aponta para cima e os ângulos giram no sentido horário.

Q: Como fazer listras nítidas em vez de uma transição suave?

Dê a duas cores a mesma posição de parada: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) troca de cor no meio, sem mistura. repeating-linear-gradient repete um padrão dessas paradas.

Q: Dá para usar um degradê como background-color?

Não. Um degradê é uma imagem, então vai em background-image ou no shorthand background. background-color: linear-gradient(...) é inválido e ignorado.

Degradês radiais

radial-gradient() mistura cores a partir de um ponto central para fora. Como todo degradê CSS, ele é uma imagem, então vai em background-image (ou no shorthand background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

A sintaxe completa é radial-gradient(shape size at position, color stops). Tudo o que vem antes das cores é opcional.

Parte	Valores	Padrão
Formato	`circle`, `ellipse`	`ellipse`
Tamanho	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner` ou comprimentos	`farthest-corner`
Posição	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Paradas de cor	Duas ou mais cores, cada uma com uma posição opcional

A palavra-chave de tamanho decide onde a última cor é atingida: no lado mais próximo da caixa, no canto mais distante e assim por diante. Mude os valores aqui e veja o degradê ser redesenhado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Experimente circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a e circle 40px, #f59e0b 99%, transparent (um ponto com borda nítida).

Degradês lineares

linear-gradient() mistura as cores ao longo de uma linha reta. Coloque uma direção ou um ângulo primeiro e depois as cores:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Os ângulos começam em 0deg apontando para cima e giram no sentido horário, então 90deg é to right e 180deg é o padrão to bottom. to right continua físico em páginas da direita para a esquerda; espelhe você mesmo se o degradê tiver que seguir a direção de leitura.

Paradas de cor e paradas bruscas

Cada cor pode ter uma posição. Sem posições, as cores são distribuídas por igual. Quando duas cores dividem a mesma posição, a mudança é instantânea, e é assim que se desenham listras, bandeiras e barras de progresso:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Uma parada também pode receber duas posições, #111827 12px 24px, o que desenha uma faixa sólida de 12px a 24px.

Degradês cônicos

conic-gradient() gira as cores em volta de um ponto central, como os ponteiros de um relógio. Com paradas bruscas, ele desenha um gráfico de pizza sem nenhuma imagem nem JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Um gráfico desenhado em CSS é invisível para leitores de tela, então coloque os números em texto também.

Texto com degradê

Recorte um fundo em degradê no formato das letras e deixe o próprio texto transparente:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Pense em uma cor color simples de reserva: se o recorte falhar, o texto some. Texto com degradê também tem contraste irregular, então use só em títulos grandes.

Degradês se empilham com imagens e outros degradês em uma única lista de background-image; a página de imagem de fundo trata de camadas, tamanho e posição.

Erros comuns

background-color: linear-gradient(...). Um degradê é uma imagem: use background-image ou background.
Graus na direção errada. 0deg aponta para cima, não para a direita. 90deg vai para a direita.
Um degradê em um elemento sem altura. Nada aparece; dê a ele conteúdo ou um tamanho.
Cores intermediárias sem vida. Misturar duas cores saturadas opostas, como vermelho e verde, passa por um cinza amarronzado em sRGB. Acrescente uma parada no meio ou misture em outro espaço de cor: linear-gradient(in oklch, red, green).
Faixas visíveis em degradês grandes e sutis. Cores muito próximas em uma área grande mostram degraus; um pouco mais de contraste entre as paradas ajuda.

Perguntas frequentes

Como fazer um degradê radial no CSS?

Use background-image: radial-gradient(#93c5fd, #1e3a8a);. Acrescente um formato e uma posição antes das cores, como radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Qual a diferença entre circle e ellipse no radial-gradient?

ellipse (o padrão) se estica nas proporções da caixa, então fica largo em uma caixa larga. circle mantém o degradê redondo, seja qual for o formato da caixa.

Como definir a direção de um linear-gradient?

Coloque uma direção ou um ângulo primeiro: linear-gradient(to right, red, blue) ou linear-gradient(45deg, red, blue). O padrão é to bottom (180deg); 0deg aponta para cima e os ângulos giram no sentido horário.

Como fazer listras nítidas em vez de uma transição suave?

Dê a duas cores a mesma posição de parada: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) troca de cor no meio, sem mistura. repeating-linear-gradient repete um padrão dessas paradas.

Dá para usar um degradê como background-color?

Não. Um degradê é uma imagem, então vai em background-image ou no shorthand background. background-color: linear-gradient(...) é inválido e ignorado.

Conceitos relacionados