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

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

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.

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.

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.

/* 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 por cima do conteúdo. Deixa de funcionar quando a página não é branca, no modo escuro, 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.

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

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 trata de lavagens de cor e modos de mistura, e texto sobre imagens trata da colocação.

Buracos transparentes e focos de luz

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

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