Gradiente transparente em CSS: esmaecimentos, overlays e scrims

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

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.

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.

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.

/* 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%);
}

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 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.

.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;
}

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 trata de banhos de cor e blend modes, e texto sobre imagens trata do posicionamento.

Furos transparentes e holofotes

Inverta a ideia: transparente no meio, escuro por fora. Um gradiente radial 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.

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

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.