# Sfondo hero per siti web: gradienti ricchi che si caricano in fretta [Canonical HTML page](https://gradiently.design/it/guide/website-hero-background) La hero è dove un sito fa la prima impressione, e dove più spesso diventa lento. Una hero con gradiente può essere insieme la cosa più ricca e la più leggera della pagina, se la costruisci nel modo giusto. ## The short version - Uno sfondo hero è l’immagine, il gradiente o il video dietro la prima sezione di una pagina web, ed è spesso l’elemento che decide quanto veloce sembra la pagina. - I gradienti in puro CSS non aggiungono quasi nulla da scaricare e si adattano perfettamente a qualsiasi schermo, il che li rende lo sfondo hero più veloce. - Le hero con immagine dovrebbero usare un master da 1920 per 1080, formati moderni come AVIF o WebP, dimensioni responsive, e non dovrebbero mai avere il caricamento differito. - Le hero con video hanno bisogno di un’immagine poster, di una riproduzione automatica muta e in linea e di un’alternativa fissa per chi preferisce meno movimento. - Qualunque sia lo sfondo, il titolo ha bisogno di una zona calma con un contrasto forte su ogni dimensione di schermo. Uno **sfondo hero** è il gradiente, l’immagine o il video dietro la prima sezione di una pagina web. Stabilisce l’atmosfera dell’intero sito, e poiché è l’elemento più grande visibile all’apertura della pagina, spesso decide quanto veloce sembra la pagina. L’opzione più veloce è un gradiente in puro CSS, che si scarica come poche righe di testo e resta nitido a qualsiasi dimensione. Immagini e video possono sembrare più ricchi ma richiedono attenzione a dimensioni, formati e caricamento, come vedrai qui sotto. Questa guida confronta i tre approcci, poi tratta dimensioni, ritagli responsive, codice e contrasto del titolo. Per i dettagli sulle prestazioni, leggi [le prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance) e [i video di sfondo sui siti web](https://gradiently.design/it/guide/video-background-website). ## CSS, immagine o video: scegliere uno sfondo hero | Approccio | Peso da scaricare | Aspetto | Ideale per | | --- | --- | --- | --- | | Gradiente CSS | Quasi nullo: fa parte del foglio di stile | Colore morbido, bagliori, mesh delicati | Siti veloci, pagine prodotto, brand costruiti sul colore | | Immagine (AVIF, WebP, JPEG) | Medio: dipende da dimensione e formato | Qualsiasi cosa: texture, fotografia, grana | Materie ricche, foto, grafica complessa | | Video | Pesante: di solito il file più grande della pagina | Movimento, profondità, atmosfera | Lanci e brand in cui il movimento è il punto | | WebGL o canvas | Script più costo di rendering | Colore vivo e interattivo | Pagine di punta con un budget di prestazioni dedicato | Parti dall’alto e scendi solo quando il design ha davvero bisogno di ciò che aggiunge l’opzione successiva. La hero di solito contiene il Largest Contentful Paint della pagina, il momento in cui compare il contenuto principale. web.dev considera buono un [LCP](https://web.dev/articles/lcp) di 2,5 secondi o meno. Un’immagine o un video hero pesante è il motivo più comune per cui una pagina non ci arriva, ed è per questo che l’opzione più leggera che ottiene l’effetto è quasi sempre quella giusta. ## Costruire una hero con gradiente CSS Sovrapporre due o tre gradienti porta sorprendentemente lontano: un gradiente lineare di base per la direzione generale, poi bagliori radiali morbidi per la luce. Fondi in OKLCH per mantenere vivaci i colori forti. Il risultato si disegna all’istante e non richiede mai un file più grande per schermi più grandi. ```css .hero { min-height: min(92svh, 900px); display: grid; place-items: center; padding: clamp(4rem, 10vw, 8rem) 1.5rem; color: #fbf8ff; background-color: #1b1240; /* fallback while gradients paint */ background-image: radial-gradient(ellipse 60% 50% at 78% 18%, oklch(0.72 0.19 350 / 0.75), transparent 70%), radial-gradient(ellipse 55% 45% at 15% 85%, oklch(0.62 0.17 250 / 0.7), transparent 70%), linear-gradient(160deg in oklch, #1b1240, #3a1d78 55%, #120c2c); } .hero h1 { max-width: 16ch; font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1.04; text-align: center; text-wrap: balance; } ``` Una hero CSS a strati: due bagliori su un gradiente di base, con un colore pieno di riserva. Pesa poche centinaia di byte e riempie qualsiasi schermo. Bagliore hero, in un solo strato: `radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)` Il bagliore rosa e lo sfondo viola profondo del codice qui sopra, disegnati come un unico gradiente radiale per mostrarne l’atmosfera. Per evitare che una hero CSS sembri un preset qualunque, aggiungi una texture. Un sottile strato di rumore SVG sopra il gradiente nasconde il banding sui grandi schermi e dà al colore un aspetto materico; [la texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture) mostra come. Per un colore più ricco a più punti, [i gradienti mesh in CSS](https://gradiently.design/it/guide/css-mesh-gradient) sovrappongono più bagliori. ## Dimensioni e formati dell’immagine hero Se la hero ha bisogno di un’immagine, crea un master da 1920 per 1080 ed esporta versioni più piccole per gli schermi più piccoli. Usa formati moderni: AVIF e WebP di solito pesano molto meno di JPEG a parità di qualità visiva, con JPEG come riserva. Carica la hero subito e di’ al browser che è importante. ```html ``` Un’immagine hero responsive: prima i formati moderni, dimensioni esplicite per evitare spostamenti del layout, `fetchpriority="high"` e nessun `loading="lazy"`. Il testo alternativo vuoto la segna come decorativa. > **Mai il caricamento differito per la hero** `loading="lazy"` ritarda le immagini finché non sono vicine all’area visibile. La hero è già nell’area visibile, quindi differirne il caricamento fa solo comparire più tardi il contenuto principale della pagina. ## Ritagli responsive per gli sfondi hero Una hero 16:9 su un telefono diventa una fetta alta e stretta. Con `object-fit: cover` il browser ritaglia dal centro per impostazione predefinita, e potrebbe tagliare via la parte importante. Imposta `object-position` per mantenere la zona focale, oppure servi un ritaglio separato e più alto per gli schermi piccoli con un attributo `media` su una `source`. - Desktop 16:9: 1920 × 1080 - Tablet, circa 4:3: 1600 × 1200 - Telefono, verticale: 1080 × 1920 La stessa hero in tre forme. I gradienti si adattano da soli; le immagini richiedono un punto focale scelto o un ritaglio separato per i telefoni. È qui che i gradienti CSS brillano: i bagliori sono posizionati in percentuale, quindi si spostano con la forma. Puoi anche cambiare le posizioni a un breakpoint, per esempio spostando il bagliore principale dall’alto a destra su desktop all’alto al centro sui telefoni, dove il titolo va a capo. ## Contrasto del titolo su uno sfondo hero ### Da evitare - Un titolo che attraversa il bagliore più luminoso - Contrasto controllato solo su desktop - Una velatura scura su tutta l’immagine per salvare il testo - Testo a basso contrasto su un gradiente di tono medio ### Da fare - Bagliori posizionati lontano dal titolo - Contrasto controllato a ogni breakpoint - Uno scrim morbido solo dove stanno le parole - Uno sfondo chiaramente scuro o chiaramente chiaro dietro il testo Controlla il contrasto nel punto più chiaro dietro il titolo, non nella media, e punta ad almeno 4,5:1 per il testo più piccolo e 3:1 per i titoli grandi. [Il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) spiega il metodo, e [il testo su immagine](https://gradiently.design/it/guide/text-over-image) tratta le hero fotografiche. Se progetti la hero in Gradiently, un Mark si disegna dal vivo a 1920 per 1080 o a qualsiasi dimensione personalizzata e sposta la sua zona più calma dietro le tue parole. Esporta un PNG o un JPEG fino a tre volte la dimensione del design per immagini nitide sugli schermi ad alta densità, oppure un loop da 5 a 30 secondi per una hero video. Ricorda lo stesso stile per la tua [immagine Open Graph](https://gradiently.design/it/guide/open-graph-image-size), così i link condivisi corrispondono alla pagina. ## FAQ ### Quali dimensioni deve avere un’immagine di sfondo hero? Crea un master da 1920 per 1080 e servi versioni più piccole agli schermi più piccoli con `srcset`. Usa AVIF o WebP con JPEG come riserva. ### Un gradiente CSS è più veloce di un’immagine hero? Sì. Un gradiente CSS è fatto di poche righe nel foglio di stile, senza nulla in più da scaricare, e resta nitido a ogni dimensione. Immagini e video aggiungono file che devono caricarsi prima che la hero sembri finita. ### Devo differire il caricamento dell’immagine hero? No. La hero è visibile all’apertura della pagina, quindi il caricamento differito la ritarda soltanto. Caricala subito, aggiungi `fetchpriority="high"` e imposta larghezza e altezza. ### Come mantengo leggibile il titolo di una hero? Metti le zone luminose lontano dalle parole, usa uno scrim morbido solo dietro il titolo se serve, e controlla il contrasto a ogni dimensione di schermo.