# Gradiente transparente em CSS: esmaecimentos, overlays e scrims

[Canonical HTML page](https://gradiently.design/pt-br/guide/css-gradient-transparent)

Um gradiente que some aos poucos é uma das ferramentas mais úteis do CSS. Também costumava deixar uma mancha cinza no meio. Veja como a transparência nos gradientes funciona hoje e os padrões que valem a pena guardar.

## The short version

- Para deixar um gradiente CSS transparente, use uma cor com alfa zero como uma das paradas, como transparent ou rgb(124 58 237 / 0).
- Os navegadores modernos interpolam as cores do gradiente com alfa pré-multiplicado, então esmaecer uma cor até a palavra-chave transparent não gera mais uma faixa cinza.
- Um gradiente de fundo só consegue esmaecer o fundo; para esmaecer o conteúdo de um elemento, use mask-image com um gradiente.
- Um scrim com várias paradas suavizadas parece mais liso do que um esmaecimento de duas paradas, que mostra uma borda visível onde o escurecimento termina.
- Um gradiente radial transparente no centro e escuro por fora cria um holofote que chama a atenção para uma área.

Para deixar um **gradiente CSS transparente**, dê a uma das paradas uma cor com alfa zero: `linear-gradient(to bottom, #7c3aed, transparent)` esmaece o violeta até sumir e deixa aparecer o que estiver por baixo. Use a mesma ideia para esmaecer o fim de um texto, criar scrims escuros atrás de legendas e overlays coloridos em fotos. Para esmaecer o conteúdo de um elemento em vez do fundo, use `mask-image` com um gradiente.

## Formas de escrever uma cor transparente

| Você escreve | Significa | Use quando |
| --- | --- | --- |
| `transparent` | Preto com alfa zero | Esmaecer qualquer cor, em navegadores modernos |
| `rgb(124 58 237 / 0)` | Este violeta com alfa zero | Quiser ser explícito ou suportar navegadores muito antigos |
| `rgb(124 58 237 / 0.4)` | Este violeta a 40 por cento | Precisar de um tom que nunca desaparece por completo |
| `#7c3aed66` | Hex de oito dígitos, cerca de 40 por cento | Usar ferramentas de design que exportam hex com alfa |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | A cor de uma variável a 40 por cento | Trabalhar com cores guardadas em propriedades personalizadas |

Cinco formas de dizer quase a mesma coisa. A forma `color-mix()` é a única que funciona com uma cor que você só conhece como variável; veja [color-mix() em CSS](https://gradiently.design/pt-br/guide/css-color-mix).

## Por que os esmaecimentos ficavam cinza

A palavra-chave `transparent` é preto com alfa zero. Os primeiros navegadores misturavam os canais vermelho, verde e azul separadamente do canal alfa, então um esmaecimento de branco para `transparent` passava por um cinza semitransparente no caminho. É por isso que tutoriais antigos insistem em `rgba(255, 255, 255, 0)`.

A especificação agora exige alfa pré-multiplicado: cada cor é ponderada pela sua opacidade antes da mistura, então uma parada totalmente transparente não contribui com cor nenhuma. Todos os navegadores atuais fazem isso. Escrever a cor correspondente com alfa zero continua sendo um hábito inofensivo, e protege você em clientes de e-mail e WebViews antigos.

### Comportamento antigo

- Branco para `transparent` passa pelo cinza
- Canais de cor misturados sem levar a opacidade em conta
- Solução: repetir a cor com alfa zero

### Navegadores atuais

- Branco para `transparent` continua branco enquanto some
- Alfa pré-multiplicado, como a especificação exige
- As duas formas funcionam; a explícita é mais portátil

- Violeta sumindo: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Verde-azulado sumindo até 70 por cento: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Brilho laranja sobre o nada: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Três esmaecimentos mostrados sobre o próprio fundo desta página, que é exatamente o que fazem no seu layout. Empilhe esmaecimentos assim sobre uma cor de base para montar fundos suaves em camadas.

Onde o esmaecimento termina importa tanto quanto as cores. Uma parada em 70 por cento encerra o esmaecimento cedo e deixa o resto da caixa totalmente limpo, ideal para um tom que só deve tocar uma borda. Duas paradas na mesma posição criam um corte seco da cor para o nada, útil para barras preenchidas pela metade e fundos divididos. As posições das paradas são explicadas em [gradientes lineares em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient).

## Esmaecer conteúdo com mask-image

Um gradiente de fundo fica atrás do conteúdo, então não consegue esmaecer texto, imagens ou uma lista com rolagem. Uma máscara consegue. Com `mask-image`, as partes opacas do gradiente mantêm o elemento visível e as partes transparentes o escondem. A cor da máscara não importa, só o alfa.

```css
/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}
```

Máscaras esmaecem o que estiver ali, sobre qualquer cor de página, clara ou escura. `mask-image` sem prefixo funciona nos navegadores atuais; acrescente `-webkit-mask-image` para versões antigas do Safari.

A alternativa antiga era um gradiente branco sobre o conteúdo. Ele quebra assim que a página deixa de ser branca, no [modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) por exemplo, e bloqueia cliques se você esquecer `pointer-events: none`. Uma máscara não tem nenhum dos dois problemas.

## Scrims: gradientes transparentes para texto

Um scrim escurece parte de uma imagem para que o texto sobre ela seja legível, e some por completo para que o resto da foto continue luminoso. Um esmaecimento de duas paradas funciona, mas a rampa reta deixa uma linha visível onde o escurecimento termina. Mais paradas, espaçadas para suavizar a saída, escondem essa borda.

Scrim suavizado, sete paradas: `linear-gradient(to top, rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%, rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%, rgb(2 6 23 / 0) 100%)`

A opacidade cai rápido perto do texto e devagar perto do topo, o que parece uma sombra natural em vez de uma faixa.

```css
.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}
```

O scrim é a primeira camada de fundo, então fica por cima da foto.

Tinja o scrim com uma versão profunda da cor da foto em vez de preto puro e ele vai parecer parte da imagem. Numa foto quente de pôr do sol, um marrom profundo como `rgb(41 20 8 / 0.75)` se funde à imagem, enquanto o preto pareceria um filtro colocado por cima. [Overlays de gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-overlay) trata de banhos de cor e blend modes, e [texto sobre imagens](https://gradiently.design/pt-br/guide/text-over-image) trata do posicionamento.

## Furos transparentes e holofotes

Inverta a ideia: transparente no meio, escuro por fora. Um [gradiente radial](https://gradiently.design/pt-br/guide/css-radial-gradient) sobre uma página ou imagem deixa uma área iluminada e escurece discretamente todo o resto, o que funciona bem em dicas de onboarding, closes de produto e slides.

```css
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}
```

Defina `--x` e `--y` via JavaScript para mover o holofote. A transição de 80 pixels entre as paradas mantém a borda suave.

Um post de produto em retrato com o título sobre uma área clara do gradiente

Sem nenhum ajuste, as palavras disputam espaço com a parte mais clara do fundo.

O mesmo post de produto com uma área mais calma e profunda do gradiente atrás do título

O fundo se aquieta atrás das palavras, o mesmo trabalho que um scrim faz num site.

Para posts e impressos, raramente você precisa montar scrims à mão. No Gradiently, o próprio Mark abre espaço para as suas palavras, aprofundando ou clareando as cores perto das letras, sem camada de overlay para ajustar em cada tamanho.

## FAQ

### Como faço um gradiente CSS sumir até ficar transparente?

Use uma cor com alfa zero como última parada: `linear-gradient(#7c3aed, transparent)` ou, para ser explícito, `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### Por que meu gradiente para transparente fica cinza?

Navegadores antigos misturam sem alfa pré-multiplicado, então `transparent` (preto transparente) acinzenta o meio. Esmaeça até a sua própria cor com alfa zero.

### Como esmaeço um texto ou uma imagem com CSS?

Use `mask-image` com um gradiente, como `mask-image: linear-gradient(#000 60%, transparent)`. O elemento esmaece sobre qualquer cor de fundo.

### O que é um scrim em CSS?

Um gradiente que escurece parte de uma imagem atrás do texto e fica transparente no resto, para que o texto seja legível e a imagem continue luminosa.

### Um gradiente CSS pode ter um furo transparente?

Sim. Um gradiente radial transparente no centro e escuro mais para fora deixa um holofote limpo sobre o que estiver embaixo.