In breve
- 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.
In questa pagina
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 e i video di sfondo sui siti web.
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 |
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 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.
.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;
}radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)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 mostra come. Per un colore più ricco a più punti, i gradienti mesh in CSS 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.
<picture>
<source type="image/avif"
srcset="/hero-960.avif 960w, /hero-1440.avif 1440w, /hero-1920.avif 1920w"
sizes="100vw">
<source type="image/webp"
srcset="/hero-960.webp 960w, /hero-1440.webp 1440w, /hero-1920.webp 1920w"
sizes="100vw">
<img src="/hero-1920.jpg"
alt=""
width="1920" height="1080"
fetchpriority="high"
decoding="async"
class="hero-bg">
</picture>fetchpriority="high" e nessun loading="lazy". Il testo alternativo vuoto la segna come decorativa.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
È 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 spiega il metodo, e il testo su immagine 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, così i link condivisi corrispondono alla pagina.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
