# Gradiente oceano: codici dalle acque basse agli abissi [Canonical HTML page](https://gradiently.design/it/guide/ocean-gradient) Il mare è già un gradiente: pallido sulla sabbia, brillante dove arriva il sole, quasi nero dove non arriva. Copia quell’ordine e una sfumatura oceano sembra vera. Ecco i codici, profondità per profondità. ## The short version - Un gradiente oceano fonde blu e verdi bluastri nell’ordine in cui li mostra l’acqua vera: pallido e turchese nelle acque basse, blu limpido in mare aperto e blu notte quasi nero negli abissi. - L’acqua assorbe prima la luce rossa, ed è per questo che il mare diventa più blu e più scuro con la profondità. - I gradienti oceano verticali, chiari in alto e scuri in basso, si leggono come profondità; un punto netto tra due blu si legge come un orizzonte. - Il testo bianco funziona sulla metà di blu profondo di un gradiente oceano; le acque basse pallide richiedono testo blu notte scuro. - I gradienti oceano vanno bene per viaggi, nuoto, vela, pesce, sostenibilità e prodotti tecnologici dal tono calmo. Un **gradiente oceano** fonde blu e verdi bluastri nello stesso ordine del mare: acqua pallida sulla sabbia, turchese nelle acque basse, blu limpido in mare aperto e un blu notte quasi nero negli abissi. Fallo scorrere dall’alto in basso, dal chiaro allo scuro, e le persone lo leggono come profondità senza che nessuno glielo dica. I codici qui sotto seguono quell’immersione, poi aggiungono sfumature d’orizzonte, un mare in CSS a pagina intera e i colori del testo che mantengono leggibili le parole sull’acqua. ## Perché l’oceano è blu e perché conta per il tuo gradiente L’acqua assorbe prima l’estremo rosso della luce solare, poi il giallo e il verde, quindi più scendi più resta solo il blu, e poi anche quello svanisce. L’acqua bassa su sabbia chiara riflette molta luce e sembra turchese; l’acqua profonda sembra blu notte. Un gradiente oceano che rispetta quest’ordine sembra naturale; uno che mette il blu scuro sopra il turchese sembra capovolto, anche se nessuno sa dire perché. - Schiuma: #e0f7f4 - Acque basse: #7ee0d6 - Laguna: #22b8cf - Mare aperto: #0284c7 - Onda lunga: #075985 - Zona crepuscolare: #0c3b66 - Profondità: #082f49 - Abisso: #020c1b Il mare dall’alto in basso. La maggior parte dei gradienti oceano usa tre o quattro punti vicini di questa colonna. ## Gradienti oceano delle acque basse L’estremità luminosa: l’acqua che vedi da una spiaggia o da una barca col bel tempo. Soleggiati, puliti e invitanti, vanno bene per brand di vacanze, costumi da bagno, aziende di piscine e menu estivi. Il lato più tropicale è trattato in [i gradienti turchesi](https://gradiently.design/it/guide/turquoise-gradient). - Dalla schiuma alle acque basse: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)` - Acqua limpida: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)` - Sole sull’acqua: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)` - Scogliera a picco: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)` Sfumature di acque basse. Ognuna parte da un punto pallido o brillante, come appare l’acqua chiara sulla sabbia. ## Gradienti del mare aperto Più al largo, il mare perde il verde e diventa di un blu limpido e sicuro. Queste sfumature sembrano affidabili, calme e capaci, ed è per questo che vanno bene per circoli velici, assicurazioni di viaggio, scienze marine e brand tecnologici che vogliono il blu senza la freddezza del blu notte aziendale. [I gradienti blu](https://gradiently.design/it/guide/blue-gradient) ha la famiglia più ampia dei blu. - Mare aperto: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)` - Atlantico: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)` - Al largo: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)` - Onda lunga: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)` Blu d’acqua aperta. Meno verde, più profondità, e ancora abbastanza luminosi in alto da sembrare luce del giorno. ## Gradienti dell’oceano profondo In fondo all’immersione il mare diventa quasi nero con una sola traccia di blu. Sono drammatici e silenziosi insieme: scuole di immersione, documentari, orologi di lusso, ristoranti di pesce dopo il tramonto. Un tenue bagliore dall’alto, come luce dalla superficie, li salva dal sembrare vuoti. Le sfumature scure formano facilmente bande, quindi leggi [le bande nei gradienti](https://gradiently.design/it/guide/gradient-banding) prima di esportare. - Discesa: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)` - Luce dalla superficie: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)` - Bioluminescenza: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)` Sfumature di mare profondo. Una sola morbida fonte di luce basta; tutto il resto è profondità. ## Gradienti d’orizzonte e di costa I design a tema oceano spesso includono il cielo o la spiaggia. Il trucco per un orizzonte è un punto netto: due punti colore nella stessa posizione, così il cielo finisce e il mare inizia su una linea pulita. Una costa funziona al contrario, sfumando il mare nella sabbia attraverso un punto di schiuma pallida, così i colori caldi e freddi non si incontrano mai come grigio. [I punti colore del gradiente](https://gradiently.design/it/guide/gradient-stops) spiega come funzionano le posizioni dei punti. - Orizzonte all’alba: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)` - Orizzonte a mezzogiorno: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)` - Costa: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)` I punti netti fanno un orizzonte; un punto di schiuma pallida fa una costa morbida. ## Scegliere la direzione per ogni formato Poiché un gradiente oceano significa profondità, funziona meglio in verticale, e i formati alti mostrano l’intera immersione. Nei formati larghi, una sfumatura d’orizzonte o un bagliore radiale di solito funziona meglio che comprimere tutto il mare in poca altezza. Un post verticale sta nel mezzo: una morbida sfumatura verticale dal mare aperto al profondo funziona, purché il titolo cada in una sola fascia e non attraversi il cambio. - Storia 1080×1920: 1080 × 1920 - Pin 1000×1500: 1000 × 1500 - Post 1080×1350: 1080 × 1350 - Hero di un sito 1920×1080: 1920 × 1080 - Banner LinkedIn 1584×396: 1584 × 396 Su storie e pin, usa l’intera altezza per l’immersione. Su hero e banner, prova invece un orizzonte o una luce da un lato. Qui una sola immagine ritagliata ti delude: la luce finisce nel posto sbagliato in metà dei tuoi formati. Un Mark di Gradiently invece si rende da capo in ogni formato, e il Designer può produrre la storia, il post e il banner da un solo brief, così il mare sta nel posto giusto in ciascuno. ## Un gradiente oceano in CSS per una pagina intera Una pagina lunga può diventare un’immersione: luminosa in alto, profonda nel footer. Applica il gradiente all’intera altezza del documento anziché alla finestra, dagli un ripiego a tinta unita e aggiungi un morbido bagliore di superficie in cima. [I gradienti lineari CSS](https://gradiently.design/it/guide/css-linear-gradient) tratta la sintassi. ```css html { background-color: #082f49; /* fallback, and the colour seen on overscroll */ } body { min-height: 100vh; margin: 0; color: #082f49; background-image: radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%), linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%); } /* switch to light text once the page reaches deep water */ .deep { color: #e0f7f4; } ``` Una pagina che diventa più profonda mentre scorri. Usa testo scuro nelle sezioni alte e luminose e testo chiaro in quelle più in basso. ## Il testo su un gradiente oceano Una sfumatura oceano passa da molto chiara a molto scura, quindi nessun colore di testo funziona su tutta la sua estensione. Il blu notte `#082f49` sull’azzurro cielo pallido `#7dd3fc` misura circa 8,3 a 1. Il bianco sull’onda lunga `#075985` misura circa 7,6 a 1, e sul mare aperto `#0284c7` scende a circa 4,1 a 1, va bene per titoli grandi ma non basta per il testo del corpo. Metti le parole dove il colore le favorisce, e vedi [il testo sui gradienti](https://gradiently.design/it/guide/text-on-gradient) per altre tecniche. Una storia per un circolo velico con un titolo ben leggibile su un gradiente oceano che scurisce dal blu brillante al blu notte profondo Una storia che va dall’acqua luminosa in alto al blu profondo in basso, con le parole nella fascia più calma. ## FAQ ### Quali colori compongono un gradiente oceano? Acqua pallida, turchese, blu limpido, blu profondo e blu notte quasi nero, in quest’ordine dall’alto in basso. Codici come `#7ee0d6`, `#0284c7` e `#082f49` coprono la gamma. ### Un gradiente oceano deve andare dal chiaro allo scuro o dallo scuro al chiaro? Chiaro in alto e scuro in basso, il che corrisponde a come la luce svanisce con la profondità nell’acqua vera. ### Come faccio una linea d’orizzonte in un gradiente CSS? Dai a due punti colore la stessa posizione, come `#bae6fd 45%, #0284c7 45%`. Il colore cambia allora su una linea netta invece che in una sfumatura. ### Che colore di testo funziona su un gradiente oceano? Blu notte scuro sulla parte alta e chiara, bianco sulla parte bassa e profonda. Controlla il punto direttamente dietro ogni riga di testo. ### Qual è la differenza tra un gradiente oceano e un gradiente blu? Un gradiente oceano segue l’ordine dell’acqua vera e di solito include turchese e blu notte quasi nero. Un gradiente blu può essere qualsiasi sfumatura di blu.