# Degradês sutis: mudanças de cor discretas para interfaces limpas

[Canonical HTML page](https://gradiently.design/pt-br/guide/subtle-gradients)

Os melhores degradês de interface são os que ninguém nota até que somem. Aqui estão códigos para colar hoje, os lugares onde valem a pena e a única armadilha técnica que pega todo mundo.

## The short version

- Um degradê sutil muda a luminosidade só em alguns por cento, ou move o matiz num passo pequeno, para a superfície parecer iluminada em vez de chapada.
- Degradês sutis funcionam melhor em fundos de página, cartões, seções de destaque e superfícies do modo escuro, onde dão profundidade sem competir com o conteúdo.
- Misturar em oklch mantém uniforme a mudança de luminosidade de um extremo ao outro do degradê sutil.
- Degradês sutis formam mais faixas que os fortes, porque há menos passos de cor entre dois tons próximos, e um pouco de ruído costuma resolver.
- Numa interface escura, uma borda superior um pouco mais clara parece luz caindo sobre a superfície.

Um **degradê sutil** passa de uma cor para outra tão próximas que você sente a mudança mais do que a vê: do branco para um off-white frio, do quase preto para um quase preto um pouco mais suave. Essa pequena variação deixa a superfície com cara de iluminada, e é por isso que interfaces limpas os usam em fundos de página, cartões e painéis do modo escuro. Os códigos abaixo mantêm a diferença de luminosidade em poucos por cento; mais que isso, e o degradê deixa de ser uma superfície e vira um elemento de destaque.

## Códigos de degradê sutil claro

Todos estes começam perto do branco e vão para um tom bem leve. Escolha o tom a partir da cor da sua marca, para que até o fundo carregue um traço de identidade. Misturas de cima para baixo parecem mais naturais, porque a luz costuma vir de cima.

- Papel: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Azul névoa: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Linho quente: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Bruma lilás: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Lavagem de menta: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Luz no canto: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Seis degradês sutis claros. Num monitor brilhante parecem papel suavemente iluminado; num celular à luz do dia, quase brancos.

## Códigos de degradê sutil escuro

Superfícies escuras ganham ainda mais, porque o preto puro e chapado parece um buraco na tela. Levante um pouco o topo e deixe a base assentar. [Degradês para modo escuro](https://gradiently.design/pt-br/guide/dark-mode-gradients) trata de temas inteiros; estes são os blocos de construção.

- Grafite: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Meia-noite: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Violeta-tinta: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Noite na floresta: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Brilho no topo: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Café expresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Seis degradês sutis escuros. O brilho no topo combina com uma seção de destaque ou um modal: uma tênue poça de luz vinda de cima.

## Onde degradês sutis funcionam numa interface

| Superfície | Quão sutil | Exemplo |
| --- | --- | --- |
| Fundo da página | Quase invisível em toda a altura | `#ffffff` para `#f6f7f9` |
| Cartão | Um toque mais claro na borda superior | `#ffffff` para `#fafafa` |
| Seção de destaque | Um tom leve concentrado atrás do título | Luz no canto ou brilho no topo |
| Botão | Topo mais claro, base um pouco mais profunda | `#4f46e5` para `#4338ca` |
| Painel do modo escuro | Topo levantado, base assentada | `#18181b` para `#0f0f12` |
| Barra lateral ou rodapé | Um passo mais escuro que a página, ainda em degradê | `#f8fafc` para `#eef2f7` |

Degradês sutis por superfície. Use uma só direção em toda a interface, para a luz parecer vir de um único lugar.

A regra prática: um degradê sutil nunca deve ser o que você olha. Se alguém comenta o degradê, ele está forte demais para um fundo. Para visuais mais contidos, também em impressos e redes sociais, veja [fundos minimalistas](https://gradiently.design/pt-br/guide/minimalist-backgrounds).

Post vertical com uma frase curta de texto sobre um fundo calmo, de cores que mudam suavemente

Um fundo calmo e uma frase curta. Quando a cor fica quieta, a tipografia faz o trabalho.

## Como tingir um degradê sutil com a cor da sua marca

Um degradê cinza neutro é seguro, mas anônimo. Tingir o extremo mais claro ou o mais escuro com um traço do matiz da marca faz toda a interface parecer ligada ao logo, sem que ninguém consiga apontar por quê. O truque é manter o matiz e descartar quase toda a saturação.

1. **Pegue o matiz da marca** Converta a cor principal da marca para oklch ou HSL e anote só o matiz: cerca de 265 para um violeta, 160 para um verde, 30 para um laranja quente.
2. **Mantenha quase cinza** Use croma bem baixo, de 0,005 a 0,015 em oklch, ou saturação abaixo de uns 30% em HSL com luminosidade muito alta. Você quer um sussurro de cor, não um pastel.
3. **Defina dois valores de luminosidade** Para temas claros, tente 99% e 96%; para temas escuros, cerca de 20% e 15%. Mantenha os dois extremos no mesmo matiz, para a mistura nunca derivar para o cinza ou para uma segunda cor.
4. **Confira ao lado de branco ou preto puro** Coloque o degradê ao lado de um bloco de branco ou preto liso. Se você não vê diferença nenhuma, ajuste o extremo inferior; se o tom aparece de longe, diminua o croma.

O mesmo tom pode então passar para bordas, divisores e estados de hover, e o degradê passa a ser parte de um sistema discreto, e não um efeito isolado. Botões são o único lugar onde vale permitir uma variação um pouco mais forte, alguns por cento mais escura embaixo, porque um indício de volume ajuda a parecerem clicáveis.

## Como escrever um degradê sutil em CSS

Códigos hex funcionam em qualquer lugar. Para um controle mais fino, escreva as cores em oklch, onde o primeiro número é a luminosidade percebida, e assim você define a variação com exatidão: de 99% a 96%, por exemplo. Misturar em oklch também mantém a mudança uniforme ao longo de todo o comprimento. [CSS gradient oklch](https://gradiently.design/pt-br/guide/css-gradient-oklch) explica a sintaxe, e [CSS linear gradient](https://gradiently.design/pt-br/guide/css-linear-gradient) cobre o básico.

```css
:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}
```

Um hex de reserva e depois uma versão em oklch, com variação de luminosidade precisa, para navegadores que aceitam interpolação de cor em degradês.

> **Fixo ou rolando** `background-attachment: fixed` prende o degradê à janela, para uma página longa não esticá-lo até virar uma variação invisível. Teste no celular, onde alguns navegadores tratam fundos fixos de outro jeito.

## Por que degradês sutis formam faixas e como resolver

Duas cores próximas têm pouquíssimos passos entre si numa imagem de 8 bits. Estique-as por um destaque de 1920 pixels e cada passo vira uma listra visível, sobretudo em degradês escuros e telas mais baratas. A explicação completa está em [faixas em degradês](https://gradiently.design/pt-br/guide/gradient-banding).

### Aparecem faixas

- Duas cores escuras muito próximas numa tela inteira
- Um degradê salvo como JPEG comprimido
- Uma mistura limpa, sem nada para quebrar os passos

### Continua suave

- Uma variação um pouco maior, ou uma terceira parada
- Renderizado em CSS ou exportado em PNG
- Uma camada de ruído tênue sobre o degradê

Na web, uma pequena textura de ruído em SVG sobreposta ao degradê com baixa opacidade elimina os passos visíveis sem que ninguém note o grão; [CSS noise texture](https://gradiently.design/pt-br/guide/css-noise-texture) traz o código. Para posts e slides, um Mark do Gradiently já traz o próprio grão e renderiza em qualquer tamanho, então um fundo discreto continua suave seja num story ou num banner. Quando você quiser o oposto do discreto, [degradês vibrantes](https://gradiently.design/pt-br/guide/vibrant-gradients) tem os códigos saturados.

## FAQ

### O que é um degradê sutil?

Um degradê entre duas cores muito próximas, em geral com diferença de luminosidade de apenas alguns por cento, para a superfície parecer suavemente iluminada em vez de visivelmente colorida.

### Qual é um bom degradê sutil para fundo branco?

Experimente `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, que vai do branco a um cinza frio bem leve.

### Por que meu degradê sutil parece listrado?

Cores próximas têm poucos passos entre si, então formam faixas. Acrescente uma terceira parada, aumente um pouco a variação ou aplique por cima uma textura de ruído tênue.

### Degradês sutis devem ir de cima para baixo?

Em geral, sim. A luz costuma vir de cima, então um topo um pouco mais claro parece natural em superfícies claras e escuras.