# Uno sfondo che si adatta al testo: come un Mark fa spazio

[Canonical HTML page](https://gradiently.design/it/guide/text-reacts-to-background)

La maggior parte degli sfondi sono immagini, e le immagini non sanno dov’è il tuo titolo. Un Mark sì, quindi si riorganizza per lasciar passare le parole invece di nascondersi dietro un riquadro.

## The short version

- Un Mark di Gradiently è uno sfondo che si adatta al testo, perché è disegnato dal vivo e sa dove sono le parole nel design.
- Dietro le tue parole, un Mark sposta al suo posto la regione più calma e più contrastata, scurisce o schiarisce i colori vicino alle lettere e distende i dettagli fitti.
- La reazione non usa riquadri, ombre né sfocature, quindi lo sfondo resta intero e le parole si leggono.
- Scegli tu quanto forte risponde un Mark, da Disattivo a Invisibile, Sottile, Chiaro e Deciso, e puoi rifinirlo con Tono, Calma, Piega e Raggio.
- Poiché il Mark è disegnato da capo per ogni formato, fa di nuovo spazio ovunque finiscano le parole in ciascun formato.

Un Mark di Gradiently è uno **sfondo che si adatta al testo**. Poiché è disegnato dal vivo e non salvato come immagine, sa dove sono le tue parole e si riorganizza intorno a loro: la parte più calma e più contrastata del materiale si sposta dietro il testo, i colori vicino alle lettere si scuriscono o si schiariscono e i dettagli fitti si distendono. Niente viene sovrapposto. Non ci sono riquadri, ombre né sfocature, quindi conservi l’intero sfondo e le parole si leggono lo stesso.

## I modi consueti per rendere leggibile il testo e cosa costano

Metti un titolo su un gradiente vivace o su una foto e una parte sparisce. Le soluzioni standard funzionano tutte coprendo lo sfondo, un esito strano quando lo sfondo era il motivo per cui avevi scelto il design.

### Coprire lo sfondo

- Un riquadro pieno o smerigliato dietro le parole
- Un’ombra portata su ogni lettera
- Sfocare l’area dietro il testo
- Un velo scuro su tutta l’immagine

### Un Mark che fa spazio

- La sua regione calma si sposta dove sono le parole
- I colori vicino alle lettere si scuriscono o si schiariscono
- Grana, creste e bagliori si distendono dietro il testo
- Il resto dello sfondo resta vivido come prima

Ogni soluzione ha il suo posto su un’immagine piatta, e il [testo su uno sfondo sfumato](https://gradiently.design/it/guide/text-on-gradient) le passa in rassegna con onestà. La differenza con un Mark è che lo sfondo partecipa, invece di essere mascherato.

## Cosa fa un Mark intorno alle tue parole

1. **Si deposita** Il materiale si sposta perché le tue parole finiscano sulla sua parte più calma. La luce che sarebbe stata dietro il titolo scivola nello spazio libero intorno.
2. **Cambia tono** Vicino alle lettere, la palette scivola verso un colore che contrasta con il testo: più scuro dietro un inchiostro chiaro, più chiaro dietro un inchiostro scuro.
3. **Si calma** Distorsione, movimento e dettaglio fine si distendono dietro le parole, così una texture forte non taglia mai un tratto sottile.
4. **Si piega ai bordi** I motivi si incurvano leggermente al margine delle parole invece di attraversarle dritti.

Un poster per l’apertura serale di un museo in cui l’area più luminosa del gradiente sta dietro il titolo

Reazione disattivata: il materiale attraversa le parole, proprio come farebbe un’immagine piatta.

Lo stesso poster del museo in cui il gradiente si è assestato in un tono calmo e più scuro dietro titolo e dettagli

Reazione attiva: lo stesso Mark deposita un’area più scura e quieta dietro il testo e tiene il suo colore altrove.

La reazione lavora a braccetto con l’[inchiostro automatico](https://gradiently.design/it/guide/auto-ink-legibility), che sceglie l’inchiostro chiaro o scuro del Mark per ogni riga. Lo sfondo fa spazio; l’inchiostro automatico sceglie il colore giusto per riempirlo.

## Scegliere quanto risponde lo sfondo

Decidi tu quanto il Mark cede. Il pannello si chiama Intorno alle tue parole e parte con cinque livelli.

| Livello | Cosa fa | Adatto a |
| --- | --- | --- |
| Disattivo | Il materiale ignora le tue parole | Sfondi per schermo e stampe d’arte senza testo |
| Invisibile | Agisce solo dove serve; nessuno se ne accorgerà | Titoli grandi e decisi su Mark calmi |
| Sottile | Equilibrato: il look resta, le parole si leggono | La maggior parte di post e storie social |
| Chiaro | Le parole vincono sempre | Menu, listini prezzi, dettagli di eventi |
| Deciso | Il massimo contrasto possibile, calmo un po’ più largo | Testo piccolo, testi lunghi, insegne lette da lontano |

Cinque punti di partenza. Sottile è un valore predefinito sensato; sali quando le parole diventano più piccole o più lunghe.

Sotto i livelli ci sono quattro manopole per la rifinitura: **Tono** stabilisce quanto il materiale si deposita dietro le parole per il contrasto, **Calma** quanto distorsione e movimento si distendono, **Piega** quanto il motivo si incurva al margine delle parole e **Raggio** se aderisce a ogni lettera o risponde intorno a tutto il blocco di testo.

> **Il Raggio è la manopola che serve a più persone** Per un titolo breve, un raggio stretto tiene vivace lo sfondo fin sulle lettere. Per un paragrafo o un elenco, un raggio più ampio calma un’unica area chiara per l’intero blocco, che è più facile da leggere.

## Perché conta a ogni formato

Un’immagine di sfondo piatta è impaginata una volta sola. Ritagliala per una storia e il punto luminoso può finire proprio dietro il titolo. Un Mark è disegnato da capo per ogni formato, quindi quando un design passa da un post a una storia a un banner, le parole si spostano e il Mark fa di nuovo spazio ovunque finiscano. È questo che permette a [un solo look di funzionare a ogni misura](https://gradiently.design/it/guide/one-look-every-size).

- Post 1080×1350: 1080 × 1350
- Storia 1080×1920: 1080 × 1920
- Intestazione X 1500×500: 1500 × 500
- Miniatura YouTube 1280×720: 1280 × 720

Quattro forme, quattro posti diversi per il titolo. L’area calma segue le parole in ciascuna.

## Una versione semplice dell’idea in CSS

Sul web puoi prendere in prestito il principio con un semplice gradiente: metti la parte più scura e calma dello sfondo dove sta il testo e tieni il colore ai bordi. Non seguirà le parole quando cambia il layout, ma è meglio di un riquadro.

Area calma e scura messa dietro il testo: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

Il blocco di testo sta nell’ellisse color prugna scuro in basso a sinistra; pesca e rosa restano vividi verso i bordi.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}
```

Sposta la posizione dell’ellisse dove sta il tuo titolo. Il [CSS per il velo di gradiente](https://gradiently.design/it/guide/css-gradient-overlay) mostra lo stesso trucco sopra una foto.

## Quando abbassare la reazione

Non ogni design vuole la massima leggibilità. Lo sfondo di un telefono non ha parole, quindi Disattivo è giusto. Un grande lettering da esposizione, una sola parola su un poster, può reggersi da solo e spesso sta meglio con Invisibile. I trattamenti di lettering come Contorno o Estrusione, trattati negli [effetti di lettering](https://gradiently.design/it/guide/lettering-treatments), portano già il proprio contrasto. Tieni i livelli forti per i lavori che li richiedono: caratteri piccoli, dettagli lunghi e tutto ciò che si legge di fretta.

## FAQ

### Come si adatta al testo un Mark di Gradiently?

Sposta la sua area più calma e più contrastata dietro le tue parole, scurisce o schiarisce i colori vicino alle lettere e distende i dettagli fitti, senza riquadri, ombre o sfocature.

### Posso impedire allo sfondo di reagire al mio testo?

Sì. Imposta la reazione su Disattivo e il materiale ignora le tue parole, ideale per gli sfondi per schermo e per i design senza testo.

### Quale livello di reazione devo usare?

Sottile va bene per la maggior parte di post e storie. Usa Chiaro o Deciso per testo piccolo, testi lunghi, menu e tutto ciò che si legge da lontano.

### La reazione funziona quando ridimensiono un design?

Sì. Un Mark è disegnato da capo per ogni misura, quindi fa di nuovo spazio ovunque finiscano le parole nel nuovo formato.