# Gradientes subtis: mudanças de cor discretas para interfaces limpas

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

Os melhores gradientes de interface são os que ninguém nota até desaparecerem. Eis códigos que podes colar hoje, os sítios onde valem a pena e a única armadilha técnica que apanha toda a gente.

## The short version

- Um gradiente subtil muda a luminosidade apenas alguns por cento, ou desloca o matiz um pequeno passo, para a superfície parecer iluminada e não plana.
- Os gradientes subtis funcionam melhor em fundos de página, cartões, secçõ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 gradiente subtil de uma ponta à outra.
- Os gradientes subtis fazem mais banding do que os fortes porque há menos passos de cor entre dois tons próximos, e um pouco de ruído é a solução habitual.
- Numa interface escura, uma margem superior ligeiramente mais clara lê-se como luz a cair sobre a superfície.

Um **gradiente subtil** passa entre duas cores tão próximas que sentes a mudança mais do que a vês: do branco para um branco-sujo frio, do quase preto para um quase preto ligeiramente mais suave. Essa pequena variação faz uma superfície parecer iluminada, e é por isso que as 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; maior do que isso e o gradiente começa a tornar-se um elemento em vez de uma superfície.

## Códigos de gradientes subtis claros

Cada um destes começa perto do branco e desliza para uma tinta ténue. Escolhe a tinta a partir da cor da tua marca para que até o fundo leve um traço de identidade. As misturas de cima para baixo parecem as 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%)`
- Névoa de lilás: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Aguada de menta: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Luz de canto: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Seis gradientes subtis claros. Num monitor luminoso leem-se como papel suavemente iluminado; num telemóvel à luz do dia, quase como branco.

## Códigos de gradientes subtis escuros

As superfícies escuras beneficiam ainda mais, porque o preto liso e puro parece um buraco no ecrã. Levanta um pouco o topo e deixa o fundo assentar. Os [gradientes para o modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-gradients) tratam 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 de floresta: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Brilho de topo: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Café expresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Seis gradientes subtis escuros. O brilho de topo serve para um destaque ou uma janela modal: uma poça ténue de luz vinda de cima.

## Onde funcionam os gradientes subtis numa interface

| Superfície | Quão subtil | Exemplo |
| --- | --- | --- |
| Fundo de página | Quase invisível em toda a altura | `#ffffff` para `#f6f7f9` |
| Cartão | Um toque mais claro na margem superior | `#ffffff` para `#fafafa` |
| Secção de destaque | Uma tinta ténue acumulada por trás do título | Luz de canto ou brilho de topo |
| Botão | Topo mais claro, fundo ligeiramente mais profundo | `#4f46e5` para `#4338ca` |
| Painel do modo escuro | Topo levantado, fundo assente | `#18181b` para `#0f0f12` |
| Barra lateral ou rodapé | Um passo mais escuro do que a página, ainda graduado | `#f8fafc` para `#eef2f7` |

Gradientes subtis por superfície. Usa uma só direção em toda a interface para a luz parecer vir de um só sítio.

A regra de ouro: um gradiente subtil nunca deve ser aquilo a que olhas. Se um revisor comentar o gradiente, é forte demais para um fundo. Para visuais mais contidos, tanto em impressão e redes sociais como em ecrãs, vê os [fundos minimalistas](https://gradiently.design/pt-pt/guide/minimalist-backgrounds).

Um post vertical com uma linha curta de texto sobre um fundo calmo e de mudança suave

Um fundo calmo e uma linha curta. Quando a cor se mantém discreta, é o texto que faz o trabalho.

## Como tingir um gradiente subtil com a cor da tua marca

Um gradiente de cinzento neutro é seguro mas anónimo. Tingir a ponta mais clara ou a mais escura com um traço do matiz da tua marca faz toda a interface parecer relacionada com o logótipo sem que ninguém consiga apontar porquê. O truque é manter o matiz e deitar fora quase toda a saturação.

1. **Toma o matiz da marca** Converte a cor principal da tua marca para oklch ou HSL e anota só o matiz: cerca de 265 para um violeta, 160 para um verde, 30 para um laranja quente.
2. **Mantém-no quase cinzento** Define a croma muito baixa, cerca de 0,005 a 0,015 em oklch, ou uma saturação abaixo de cerca de 30% em HSL com luminosidade muito alta. Queres um sussurro de cor, não um pastel.
3. **Define dois valores de luminosidade** Para temas claros, experimenta 99% e 96%; para temas escuros, cerca de 20% e 15%. Mantém as duas pontas no mesmo matiz para a mistura nunca derivar para cinzento ou para uma segunda cor.
4. **Confere-o ao lado do branco ou do preto puros** Põe o gradiente ao lado de um bloco simples de branco ou preto. Se não vires qualquer diferença, ajusta a ponta inferior; se a tinta for óbvia do outro lado da sala, baixa a croma.

A mesma tinta pode depois passar para bordas, divisórias e estados de passagem do rato, para o gradiente ser uma parte de um sistema discreto e não um efeito solitário. Os botões são o único sítio onde se pode permitir uma variação ligeiramente mais forte, uns por cento mais escura em baixo, porque uma ideia de volume ajuda-os a parecer clicáveis.

## Escrever um gradiente subtil em CSS

Os códigos hex funcionam em todo o lado. Para um controlo mais fino, escreve as cores em oklch, onde o primeiro número é a luminosidade percebida, para definires 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. O [gradiente CSS em oklch](https://gradiently.design/pt-pt/guide/css-gradient-oklch) explica a sintaxe, e o [gradiente linear CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient) trata do 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;
}
```

Uma alternativa em hex e depois uma versão em oklch com uma variação precisa de luminosidade para navegadores que suportam interpolação de cor em gradientes.

> **Fixo ou com scroll** `background-attachment: fixed` mantém o gradiente preso à janela, para uma página longa não o esticar até uma variação invisível. Testa-o em telemóvel, onde alguns navegadores tratam os fundos fixos de forma diferente.

## Porque é que os gradientes subtis fazem banding, e a solução

Duas cores próximas têm muito poucos passos entre si numa imagem de 8 bits. Estica-as num destaque de 1920 píxeis e cada passo torna-se uma risca visível, sobretudo em gradientes escuros e ecrãs mais baratos. A explicação completa está no [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).

### Mostra riscas

- Duas cores escuras muito próximas ao longo de um ecrã inteiro
- Um gradiente guardado como JPEG comprimido
- Uma mistura limpa sem nada que quebre os passos

### Fica suave

- Uma variação ligeiramente maior, ou uma terceira paragem
- Desenhado em CSS, ou exportado como PNG
- Uma camada de ruído ténue por cima do gradiente

Na web, uma pequena textura de ruído em SVG por cima do gradiente, com baixa opacidade, remove os passos visíveis sem que ninguém repare no grão; a [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture) tem o código. Para posts e diapositivos, um Mark do Gradiently leva o seu próprio grão e desenha-se em todos os tamanhos, por isso um fundo discreto fica suave seja um story ou um banner. Quando queres o oposto do discreto, os [gradientes vibrantes](https://gradiently.design/pt-pt/guide/vibrant-gradients) têm os códigos saturados.

## FAQ

### O que é um gradiente subtil?

Um gradiente entre duas cores muito próximas, normalmente com uma diferença de luminosidade de apenas alguns por cento, para a superfície parecer suavemente iluminada e não visivelmente colorida.

### Qual é um bom gradiente subtil para um fundo branco?

Experimenta `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, que desliza do branco para um cinzento frio ténue.

### Porque é que o meu gradiente subtil parece às riscas?

As cores próximas têm poucos passos entre si, por isso fazem banding. Junta uma terceira paragem, alarga ligeiramente a variação ou põe por cima uma textura de ruído ténue.

### Os gradientes subtis devem ir de cima para baixo?

Normalmente. A luz costuma vir de cima, por isso um topo ligeiramente mais claro lê-se como natural tanto em superfícies claras como escuras.