Gradienti trasparenti in CSS: sfumature, overlay e scrim

Per rendere trasparente un gradiente CSS, dai a uno dei suoi stop un colore con alfa zero: linear-gradient(to bottom, #7c3aed, transparent) sfuma il viola nel nulla e lascia vedere ciò che sta sotto. Lo stesso principio vale per le dissolvenze a fine testo, gli scrim scuri dietro le didascalie e i veli colorati sulle foto. Per sfumare il contenuto di un elemento e non il suo sfondo, usa invece mask-image con un gradiente.

Modi di scrivere un colore trasparente

Perché le sfumature diventavano grigie

La parola chiave transparent è nero con alfa zero. I primi browser mescolavano separatamente i canali rosso, verde e blu e il canale alfa, così una sfumatura da bianco a transparent passava per un grigio semitrasparente. Per questo i vecchi tutorial insistono su rgba(255, 255, 255, 0).

La specifica ora richiede l’alfa premoltiplicato: ogni colore è pesato in base alla sua opacità prima della miscelazione, quindi uno stop completamente trasparente non porta alcun colore. Tutti i browser attuali lo fanno. Scrivere il colore corrispondente con alfa zero resta un’abitudine innocua e ti protegge nei client di posta e nei vecchi WebView.

Conta quanto dove finisce la sfumatura e quali colori usa. Uno stop al 70 percento chiude la sfumatura in anticipo e lascia il resto del box completamente libero, ideale per una tinta che deve toccare solo un bordo. Due stop nella stessa posizione creano un taglio netto dal colore al nulla, utile per barre riempite a metà e sfondi divisi. Le posizioni degli stop sono spiegate in Gradienti lineari in CSS.

Sfumare i contenuti con mask-image

Un gradiente di sfondo sta dietro al contenuto, quindi non può sfumare testo, immagini o un elenco scorrevole. Una maschera sì. Con mask-image, le parti opache del gradiente mantengono visibile l’elemento e quelle trasparenti lo nascondono. Il colore della maschera non conta, conta solo l’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%);
}

La vecchia alternativa era un gradiente bianco sopra il contenuto. Si rompe appena la pagina non è bianca, per esempio nella modalità scura, e blocca i clic se non ricordi pointer-events: none. Una maschera non ha nessuno dei due problemi.

Scrim: gradienti trasparenti per il testo

Uno scrim scurisce una parte di un’immagine perché il testo sopra si legga, e svanisce fino alla trasparenza totale perché il resto della foto resti luminoso. Una sfumatura a due stop funziona, ma la sua rampa dritta lascia una linea visibile dove finisce lo scurimento. Più stop, distribuiti in modo dolce, nascondono quel bordo.

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

Tingi lo scrim con una versione profonda del colore della foto invece del nero puro e sembrerà parte dell’immagine. Su una foto di tramonto caldo, un marrone scuro come rgb(41 20 8 / 0.75) si fonde con l’immagine, mentre il nero sembrerebbe un filtro appoggiato sopra. Overlay a gradiente in CSS tratta i veli di colore e le modalità di fusione, e testo sulle immagini la posizione.

Buchi trasparenti e riflettori

Capovolgi l’idea: trasparente al centro, scuro fuori. Un gradiente radiale steso su una pagina o un’immagine lascia illuminata una zona e attenua con discrezione tutto il resto, perfetto per i suggerimenti di onboarding, i primi piani di prodotto e le slide.

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

Per i post social e la stampa raramente serve costruire a mano gli scrim. In Gradiently è il Mark stesso a fare spazio alle tue parole, approfondendo o schiarendo i colori vicino alle lettere, senza alcun livello di overlay da regolare per ogni formato.