# Gradienti trasparenti in CSS: sfumature, overlay e scrim

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

Un gradiente che svanisce nel nulla è uno degli strumenti più utili del CSS. Un tempo lasciava anche una macchia grigia a metà. Ecco come funziona oggi la trasparenza nei gradienti e quali schemi vale la pena tenere.

## The short version

- Per rendere trasparente un gradiente CSS usa come stop un colore con alfa zero, come transparent o rgb(124 58 237 / 0).
- I browser moderni interpolano i colori del gradiente con alfa premoltiplicato, quindi sfumare un colore verso la parola chiave transparent non produce più una banda grigia.
- Un gradiente di sfondo può sfumare solo lo sfondo; per sfumare il contenuto vero di un elemento usa mask-image con un gradiente.
- Uno scrim con più stop dolci appare più morbido di una sfumatura a due stop, che mostra un bordo visibile dove finisce lo scurimento.
- Un gradiente radiale trasparente al centro e scuro all’esterno crea un riflettore che attira l’attenzione su una sola zona.

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

| Scrivi | Significa | Usalo quando |
| --- | --- | --- |
| `transparent` | Nero con alfa zero | Vuoi sfumare qualsiasi colore, nei browser moderni |
| `rgb(124 58 237 / 0)` | Questo viola con alfa zero | Vuoi essere esplicito o supportare browser molto vecchi |
| `rgb(124 58 237 / 0.4)` | Questo viola al 40 percento | Serve una tinta che non sparisce mai del tutto |
| `#7c3aed66` | Esadecimale a otto cifre, circa 40 percento | Gli strumenti di design esportano esadecimale con alfa |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | Il colore di una variabile al 40 percento | I colori sono salvati in proprietà personalizzate |

Cinque modi per dire lo stesso genere di cosa. La forma `color-mix()` è l’unica che funziona su un colore noto solo come variabile; vedi [color-mix() in CSS](https://gradiently.design/it/guide/css-color-mix).

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

### Comportamento vecchio

- Da bianco a `transparent` passa per il grigio
- Canali di colore mescolati senza tener conto dell’opacità
- Soluzione: ripeti il colore con alfa zero

### Browser attuali

- Da bianco a `transparent` resta bianco mentre svanisce
- Alfa premoltiplicato, come richiede la specifica
- Vanno bene entrambe le forme; quella esplicita è più portabile

- Viola che svanisce: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Verde acqua, svanisce al 70 percento: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Alone arancione sul nulla: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Tre sfumature mostrate sopra lo sfondo di questa stessa pagina, che è esattamente ciò che fanno nel tuo layout. Sovrapponile a un colore di base per costruire sfondi morbidi e a strati.

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](https://gradiently.design/it/guide/css-linear-gradient).

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

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

Le maschere sfumano ciò che c’è sotto, su qualsiasi colore di pagina, chiaro o scuro. `mask-image` senza prefisso funziona nei browser attuali; aggiungi `-webkit-mask-image` per i Safari più vecchi.

La vecchia alternativa era un gradiente bianco sopra il contenuto. Si rompe appena la pagina non è bianca, per esempio nella [modalità scura](https://gradiently.design/it/guide/dark-mode-design), 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.

Scrim dolce, sette stop: `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%)`

L’opacità scende in fretta vicino al testo e lentamente verso l’alto, e si legge come ombra naturale invece che come una fascia.

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

Lo scrim è il primo livello di sfondo, quindi sta sopra la foto.

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](https://gradiently.design/it/guide/css-gradient-overlay) tratta i veli di colore e le modalità di fusione, e [testo sulle immagini](https://gradiently.design/it/guide/text-over-image) la posizione.

## Buchi trasparenti e riflettori

Capovolgi l’idea: trasparente al centro, scuro fuori. Un [gradiente radiale](https://gradiently.design/it/guide/css-radial-gradient) 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.

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

Imposta `--x` e `--y` da JavaScript per spostare il riflettore. La miscela di 80 pixel tra gli stop mantiene morbido il bordo.

Un post verticale di prodotto in cui il titolo sta sopra una zona luminosa del gradiente

Senza alcuna modellazione, le parole competono con la parte più luminosa dello sfondo.

Lo stesso post di prodotto con una zona più calma e profonda del gradiente dietro il titolo

Lo sfondo si calma dietro le parole, il lavoro che uno scrim fa su un sito web.

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.

## FAQ

### Come faccio sfumare un gradiente CSS verso il trasparente?

Usa un colore con alfa zero come ultimo stop: `linear-gradient(#7c3aed, transparent)` oppure, per essere espliciti, `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### Perché il mio gradiente verso il trasparente sembra grigio?

I browser più vecchi mescolano senza alfa premoltiplicato, quindi `transparent` (nero trasparente) fa diventare grigio il centro. Sfuma invece verso il tuo colore con alfa zero.

### Come sfumo un testo o un’immagine con il CSS?

Usa `mask-image` con un gradiente, per esempio `mask-image: linear-gradient(#000 60%, transparent)`. L’elemento sfuma su qualsiasi colore di sfondo.

### Che cos’è uno scrim in CSS?

Un gradiente che scurisce una parte di un’immagine dietro il testo e svanisce fino alla trasparenza altrove, così il testo si legge e l’immagine resta luminosa.

### Un gradiente CSS può avere un buco trasparente?

Sì. Un gradiente radiale trasparente al centro e scuro più all’esterno lascia un riflettore libero sopra ciò che sta sotto.