# Sfondo con gradiente per desktop e telefono: codici e come farlo [Canonical HTML page](https://gradiently.design/it/guide/gradient-wallpaper) Un gradiente è lo sfondo ideale: nessun dettaglio che litiga con le icone, niente che stanchi e un colore che cambia l’atmosfera di un intero schermo. Ecco come farne uno che resti morbido a piena dimensione. ## The short version - Uno sfondo con gradiente è una sfumatura morbida di colori usata come sfondo di desktop o telefono, scelta perché resta calma dietro icone, widget e finestre. - Fai gli sfondi del desktop alla risoluzione esatta del tuo schermo e nella sua forma, di solito 16:9, e quelli del telefono alti, con altezza extra oltre il 9:16. - I gradienti grandi e lisci sono il luogo in cui il banding si vede di più, quindi aggiungi grana fine ed esporta in PNG invece che in JPEG compresso. - Metti la parte più chiara o più movimentata del gradiente lontano da dove stanno icone, orologio e widget. - Sfumare i colori in OKLCH mantiene vivaci i gradienti arcobaleno e complementari invece di farli diventare grigi al centro. 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](https://gradiently.design/it/guide/gradient-color-combinations). ## 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. - Fioritura di corallo: `linear-gradient(135deg, #ff9a8b 0%, #ff6a88 45%, #ff99ac 100%)` - Cielo del mattino: `linear-gradient(160deg, #a1c4fd 0%, #c2e9fb 100%)` - Foschia di zucchero filato: `linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)` - Sole d’albicocca: `linear-gradient(120deg, #f6d365 0%, #fda085 100%)` - Spettro pastello: `linear-gradient(120deg, #ffb3b3 0%, #ffe0a3 25%, #b8f2e6 50%, #b9c6ff 75%, #e3b8ff 100%)` - Vortice di prisma: `conic-gradient(from 210deg at 70% 30%, #ff7eb3, #ffb86b, #fff27a, #7affc4, #6bc7ff, #b58cff, #ff7eb3)` - Laguna profonda: `linear-gradient(160deg, #134e5e 0%, #2f8f83 50%, #71b280 100%)` - Notte viola: `radial-gradient(ellipse at 30% 20%, #5b3cc4 0%, #2a1b6b 45%, #0e0a24 100%)` - Crepuscolo di brace: `radial-gradient(ellipse at 70% 80%, #ff6a3d 0%, #8a1f5c 45%, #1a0b24 100%)` - Acciaio di mezzanotte: `linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%)` Dieci sfondi con gradiente dal brillante allo scuro. I due gradienti a spettro mantengono i colori a una luminosità simile, così si leggono come un’unica luce morbida e non come strisce. ## Come fare uno sfondo con gradiente 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. **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](https://gradiently.design/it/guide/analogous-colors) sono la via più facile. 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. **Sfuma con dolcezza** Distribuisci gli arresti e sfuma in OKLCH se i colori sono lontani sulla ruota, così il centro non diventa grigio. 5. **Aggiungi la grana** Uno strato di rumore fine a bassa intensità. Nasconde il banding e fa sembrare più ricco il colore. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), che mantiene vivaci i colori vivaci al centro della sfumatura. ```html ``` Un’anteprima di gradiente a schermo intero sfumata in OKLCH, con un morbido alone radiale sovrapposto. Aprila in un browser, regola i numeri, poi ricreala o catturala alla dimensione del tuo schermo. ## 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 Le tre forme da pianificare. I pixel esatti variano a seconda del modello, quindi controlla il tuo prima di esportare. 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](https://gradiently.design/it/guide/phone-wallpaper-size) 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. ### Causa strisce e fango - Colori vicini e scuri su un’area ampia - Forte compressione JPEG - Colori complementari sfumati in sRGB - Una sfumatura perfettamente liscia senza rumore ### La mantiene liscia - Un intervallo di colore sufficiente lungo la sfumatura - Esportazione in PNG o ad alta qualità - Sfumatura in OKLCH, o un colore intermedio - Grana fine su tutta l’immagine Le spiegazioni più approfondite stanno nel [banding nei gradienti](https://gradiently.design/it/guide/gradient-banding) e nei [gradienti fangosi](https://gradiently.design/it/guide/muddy-gradients). 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. Un Mark mostrato da solo: un gradiente vivo con colore, materiale, luce e grana che può essere renderizzato a qualsiasi dimensione di schermo. 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](https://gradiently.design/it/guide/live-wallpaper). ## FAQ ### Che dimensione dovrebbe avere uno sfondo con gradiente? L’esatta risoluzione del tuo schermo, o più grande nella stessa forma. I desktop sono di solito 16:9 o 16:10; i telefoni sono più alti, spesso intorno a 9:19,5, quindi controlla il tuo modello. ### Perché il mio sfondo con gradiente ha delle strisce? È banding: lo schermo mostra una sfumatura liscia in gradini visibili. Esporta in PNG, evita la forte compressione e aggiungi grana fine per nasconderlo. ### Come faccio uno sfondo con gradiente arcobaleno che non sembri economico? Usa una parte dello spettro e non tutto, mantieni i colori a una luminosità simile e sfuma in OKLCH così i colori restano vivaci tra un arresto e l’altro. ### Gli sfondi scuri sono meglio per un telefono? Sono più facili da guardare con poca luce e fanno risaltare le icone. Sui telefoni con schermo OLED gli sfondi scuri possono anche consumare un po’ meno, ma scegli quello che ti piace guardare.