Sfondo con gradiente per desktop e telefono: codici e come farlo

Uno sfondo con gradiente è una sfumatura morbida di colori usata come sfondo di un desktop o di un telefono. Funziona perché non ha dettagli che competano con icone, widget e finestre, e cambia l’atmosfera di un intero schermo con il solo colore. Per farne uno buono: scegli una famiglia da tre a cinque colori, sfumali con delicatezza con la luce dove vuoi che l’occhio riposi, esporta alla dimensione e alla forma esatte del tuo schermo e aggiungi grana fine così la sfumatura resta liscia invece di mostrare strisce.

Qui sotto trovi gradienti pronti da copiare, il metodo per farne di tuoi e come adattare ciascuno a uno schermo. Per altre combinazioni di colori, vedi le combinazioni di colori per gradienti.

Idee di sfondi con gradiente, con i codici

Ognuno di questi è un singolo gradiente CSS, quindi puoi vederne l’anteprima in un browser, adattarne i colori ed esportarlo a qualsiasi dimensione. Sono raggruppati alla buona dal brillante allo scuro.

Come fare uno sfondo con gradiente

1. 1

   Trova la dimensione del tuo schermo

   Controlla nelle impostazioni dello schermo la risoluzione, e nelle specifiche del telefono la dimensione dello schermo. Progetta esattamente a quella dimensione, o più grande nella stessa forma.

2. 2

   Scegli una famiglia di colori

   Da tre a cinque colori con una relazione chiara: tinte vicine per la calma, una coppia calda e fredda per l’energia. I colori analoghi sono la via più facile.

3. 3

   Posiziona la luce

   Decidi dove va l’area più luminosa. Sul desktop, lontano dalle icone; sul telefono, di solito dietro l’orologio o in basso al centro.

4. 4

   Sfuma con dolcezza

   Distribuisci gli arresti e sfuma in OKLCH se i colori sono lontani sulla ruota, così il centro non diventa grigio.

5. 5

   Aggiungi la grana

   Uno strato di rumore fine a bassa intensità. Nasconde il banding e fa sembrare più ricco il colore.

6. 6

   Esporta in PNG

   L’esportazione senza perdita mantiene liscia la sfumatura. Un JPEG molto compresso è la causa più comune delle strisce.

Se vuoi costruirne uno nel browser, imposta un gradiente su una pagina a schermo intero e sfumalo in OKLCH. I browser moderni supportano l’interpolazione del colore nei gradienti, che mantiene vivaci i colori vivaci al centro della sfumatura.

<!doctype html>
<html>
<head>
<style>
  html, body { margin: 0; height: 100%; }
  body {
    background:
      radial-gradient(ellipse at 25% 20%, oklch(0.78 0.14 20 / 0.9), transparent 60%),
      linear-gradient(135deg in oklch, oklch(0.62 0.2 300), oklch(0.72 0.15 200));
  }
</style>
</head>
<body></body>
</html>

Le forme degli sfondi per desktop e telefono

Uno sfondo sta meglio quando è fatto per la forma del suo schermo, non ritagliato da un altro. La maggior parte degli schermi desktop è 16:9 o vicina; i portatili sono spesso un po’ più alti, intorno a 16:10. I telefoni sono molto più alti del 16:9: molti sono intorno a 9:19,5. Progetta ogni forma separatamente e lascia che la luce cada nel punto giusto per ciascuna.

Desktop 16:9

1920 × 1080

Portatile 16:10

1600 × 1000

Telefono alto, circa 9:19,5

900 × 1950

Con due o più monitor puoi impostare un’immagine per schermo oppure farne una sola larga, alla larghezza combinata di entrambi. La seconda opzione lascia scorrere un unico gradiente lungo la scrivania, ma la giunzione tra gli schermi lo taglierà, quindi tieni la luce lontana da quel bordo.

I telefoni aggiungono due complicazioni: l’orologio della schermata di blocco e i widget stanno sopra il terzo superiore, e alcuni telefoni spostano leggermente lo sfondo quando li inclini, ritagliandone i bordi. La dimensione dello sfondo del telefono le tratta entrambe in dettaglio.

Mantenere lisci gli sfondi con gradiente

Gli sfondi vengono mostrati in grande, spesso su schermi luminosi e di alta qualità, il che li rende la prova più dura per un gradiente. I due problemi che vedrai sono il banding, quando una sfumatura liscia si spezza in gradini visibili, e i centri fangosi, quando due colori forti si incontrano nel grigio.

Le spiegazioni più approfondite stanno nel banding nei gradienti e nei gradienti fangosi. Per gli sfondi, la grana è la soluzione più semplice: spezza i gradini così l’occhio vede un’unica sfumatura continua, e fa sembrare pellicola il colore digitale piatto.

Sfondi con gradiente scuri o chiari

Gli sfondi scuri affaticano meno gli occhi di notte e fanno risaltare le icone colorate; formano anche più facilmente il banding, quindi la grana conta di più. Gli sfondi chiari sembrano arieggiati ma possono rendere difficile leggere il testo bianco sui widget. Se il tuo telefono passa dall’aspetto chiaro a quello scuro, considera una coppia: le stesse tinte, una versione schiarita e una approfondita.

GR·N10S·5T

Cameo Bolero

Vedi questo Mark

In Gradiently puoi progettare con qualsiasi Mark a dimensioni personalizzate fino a 8.000 pixel sul lato lungo, così un solo look può diventare lo sfondo di un desktop, di un portatile e di un telefono. I Mark si esportano anche come video in loop da 5 a 30 secondi, se vuoi uno sfondo animato.