# Gradiente transparente em CSS: esbatidos, sobreposições e scrims

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

Um gradiente que se esbate até desaparecer é das ferramentas mais úteis do CSS. Também já deixou uma mancha cinzenta a meio. Aqui fica como funciona hoje a transparência nos gradientes e os padrões que vale a pena guardar.

## The short version

- Para tornar um gradiente CSS transparente, usa uma cor com alfa zero numa das paragens, como transparent ou rgb(124 58 237 / 0).
- Os browsers modernos interpolam as cores do gradiente com alfa pré-multiplicado, pelo que esbater uma cor para a palavra-chave transparent já não produz uma faixa cinzenta.
- Um gradiente de fundo só consegue esbater o fundo; para esbater o conteúdo real de um elemento, usa mask-image com um gradiente.
- Um scrim com várias paragens suavizadas fica mais liso do que um esbatido de duas paragens, que mostra uma aresta visível onde o escurecimento termina.
- Um gradiente radial transparente ao centro e escuro por fora faz um foco de luz que chama a atenção para uma só zona.

Para fazer um **gradiente CSS transparente**, dá a uma das paragens uma cor com alfa zero: `linear-gradient(to bottom, #7c3aed, transparent)` esbate o violeta até ao nada e deixa ver o que estiver por baixo. Usa a mesma ideia para esbater o fim de um texto, para scrims escuros atrás de legendas e para sobreposições coloridas em fotografias. Para esbater o conteúdo de um elemento, e não o fundo, usa antes `mask-image` com um gradiente.

## Formas de escrever uma cor transparente

| Escreves | Significa | Usa quando |
| --- | --- | --- |
| `transparent` | Preto com alfa zero | Esbater qualquer cor, nos browsers modernos |
| `rgb(124 58 237 / 0)` | Este violeta com alfa zero | Queres ser explícito ou suportar browsers muito antigos |
| `rgb(124 58 237 / 0.4)` | Este violeta a 40 por cento | Uma tinta que nunca desaparece por completo |
| `#7c3aed66` | Hexadecimal de oito dígitos, cerca de 40 por cento | 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 | Cores guardadas em propriedades personalizadas |

Cinco maneiras de dizer o mesmo tipo de coisa. A forma `color-mix()` é a única que funciona com uma cor que só conheces como variável; vê [color-mix() em CSS](https://gradiently.design/pt-pt/guide/css-color-mix).

## Porque é que os esbatidos ficavam cinzentos

A palavra-chave `transparent` é preto com alfa zero. Os primeiros browsers misturavam os canais de vermelho, verde e azul e o canal alfa em separado, por isso um esbatido de branco para `transparent` passava por um cinzento semitransparente pelo caminho. É por isso que os tutoriais antigos insistem em `rgba(255, 255, 255, 0)`.

A especificação exige agora alfa pré-multiplicado: cada cor é ponderada pela sua opacidade antes da mistura, pelo que uma paragem totalmente transparente não contribui com cor nenhuma. Todos os browsers atuais fazem isto. Escrever a cor correspondente com alfa zero continua a ser um hábito inofensivo e deixa-te seguro em clientes de email e WebViews antigas.

### Comportamento antigo

- De branco para `transparent` passa por cinzento
- Canais de cor misturados sem ter em conta a opacidade
- Solução: repetir a cor com alfa zero

### Browsers atuais

- De branco para `transparent` mantém-se branco ao esbater
- Alfa pré-multiplicado, como a especificação exige
- Ambas as formas funcionam; a explícita é mais portátil

- Violeta a esbater-se: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Verde-azulado, esbate aos 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 esbatidos mostrados sobre o fundo desta página, que é exatamente o que fazem no teu layout. Empilha esbatidos como estes sobre uma cor de base para construir fundos suaves e em camadas.

O sítio onde o esbatido termina conta tanto como as cores. Uma paragem aos 70 por cento termina o esbatido mais cedo e deixa o resto da caixa totalmente limpo, o que é ideal para uma tinta que só deve tocar num dos lados. Duas paragens na mesma posição fazem um corte seco da cor para o nada, útil para barras meio preenchidas e fundos divididos. As posições das paragens estão explicadas em [gradientes lineares em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient).

## Esbater conteúdo com mask-image

Um gradiente de fundo fica atrás do conteúdo, por isso não consegue esbater texto, imagens ou uma lista com scroll. Uma máscara consegue. Com `mask-image`, as partes opacas do gradiente mantêm o elemento visível e as transparentes escondem-no. 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%);
}
```

As máscaras esbatem o que lá estiver, em qualquer cor de página, clara ou escura. O `mask-image` sem prefixo funciona nos browsers atuais; acrescenta `-webkit-mask-image` para o Safari mais antigo.

A alternativa antiga era um gradiente branco por cima do conteúdo. Deixa de funcionar quando a página não é branca, no [modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-design), por exemplo, e bloqueia cliques se te esqueceres de `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 o texto se ler bem e esbate-se até ficar totalmente transparente, para o resto da fotografia continuar luminoso. Um esbatido de duas paragens serve, mas a rampa reta deixa uma linha visível onde o escurecimento acaba. Mais paragens, espaçadas de forma suavizada, escondem essa aresta.

Scrim suavizado, sete paragens: `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 desce depressa perto do texto e devagar junto ao topo, o que se lê como sombra natural e não como 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, por isso fica por cima da fotografia.

Tinge o scrim com uma versão escura da cor da fotografia em vez de preto puro e ele parecerá parte da imagem. Numa fotografia quente de pôr do sol, um castanho escuro como `rgb(41 20 8 / 0.75)` afunda-se na imagem, onde o preto pareceria um filtro posto por cima. [Sobreposições de gradiente em CSS](https://gradiently.design/pt-pt/guide/css-gradient-overlay) trata de lavagens de cor e modos de mistura, e [texto sobre imagens](https://gradiently.design/pt-pt/guide/text-over-image) trata da colocação.

## Buracos transparentes e focos de luz

Inverte a ideia: transparente ao meio, escuro por fora. Um [gradiente radial](https://gradiently.design/pt-pt/guide/css-radial-gradient) sobre uma página ou imagem deixa uma zona iluminada e escurece discretamente tudo o resto, o que serve para dicas de onboarding, grandes planos de produto e diapositivos.

```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
  );
}
```

Define `--x` e `--y` a partir de JavaScript para mover o foco. A mistura de 80 píxeis entre as paragens mantém a borda suave.

Uma publicação vertical de produto em que o título está sobre uma zona clara do gradiente

Sem qualquer ajuste, as palavras competem com a zona mais clara do fundo.

A mesma publicação de produto, com uma zona mais calma e mais escura do gradiente atrás do título

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

Para publicações sociais e impressão, raramente precisas de construir scrims à mão. No Gradiently, o próprio Mark abre espaço para as tuas palavras, aprofundando ou aclarando as cores perto das letras, sem camada de sobreposição para afinar em cada tamanho.

## FAQ

### Como faço um gradiente CSS esbater-se para transparente?

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

### Porque é que o meu gradiente para transparente fica cinzento?

Os browsers antigos misturam sem alfa pré-multiplicado, por isso `transparent` (preto transparente) torna o meio cinzento. Esbate antes para a tua cor com alfa zero.

### Como esbato texto ou uma imagem com CSS?

Usa `mask-image` com um gradiente, como `mask-image: linear-gradient(#000 60%, transparent)`. O elemento esbate-se em qualquer cor de fundo.

### O que é um scrim em CSS?

Um gradiente que escurece parte de uma imagem atrás do texto e se esbate para transparente no resto, para o texto se ler e a imagem continuar luminosa.

### Pode um gradiente CSS ter um buraco transparente?

Sim. Um gradiente radial transparente ao centro e escuro mais para fora deixa um foco limpo sobre o que estiver por baixo.