In questo articolo
Cosa sono i gradienti CSS?
I gradienti CSS ti permettono di creare transizioni fluide tra due o più colori senza utilizzare immagini. Sono renderizzati nativamente dal browser, rendendoli indipendenti dalla risoluzione e veloci da caricare. I gradienti sono uno degli strumenti più versatili nel web design moderno.
Esistono tre tipi di gradienti CSS: lineare (transizione lungo una linea retta), radiale (si irradia da un punto centrale) e conico (spazza intorno a un punto centrale). Ogni tipo supporta più stop di colore, permettendoti di creare effetti complessi e stratificati con una singola proprietà CSS.
Come funziona il nostro generatore
Il generatore di gradienti CSS di CheckTown fornisce un'interfaccia visuale intuitiva per creare tutti e tre i tipi di gradienti. Ogni modifica aggiorna l'anteprima e il codice CSS in tempo reale.
- Scegli il tipo di gradiente — lineare, radiale o conico — e regola l'angolo o la posizione
- Aggiungi, rimuovi e riordina gli stop di colore con un clic. Usa il selettore colore o digita i codici hex direttamente
- Copia il CSS generato con un clic e incollalo direttamente nel tuo foglio di stile
Prova gratuitamente — nessuna registrazione richiesta
Crea un gradiente →Quando usare i gradienti CSS
I gradienti sono un'alternativa leggera alle immagini di sfondo e possono migliorare notevolmente i tempi di caricamento delle pagine aggiungendo profondità visiva ai tuoi design.
- Sezioni hero e banner — sostituisci immagini di sfondo pesanti con gradienti CSS per tempi di caricamento più veloci
- Accenti per pulsanti e card — sfondi gradiente sottili aggiungono profondità senza risorse aggiuntive
- Overlay e maschere — sovrapponi gradienti alle immagini per la leggibilità del testo o effetti artistici
Domande frequenti
I gradienti CSS funzionano in tutti i browser?
Sì. I gradienti lineari e radiali sono supportati in tutti i browser moderni, inclusi Chrome, Firefox, Safari e Edge. I gradienti conici sono anche ampiamente supportati, con una copertura superiore al 95% a livello globale.
Si può animare un gradiente CSS?
Non direttamente — CSS non può fare transizioni tra valori di gradiente. Tuttavia, puoi animare le proprietà background-position o background-size per creare l'illusione di un gradiente in movimento, o usare proprietà personalizzate CSS con @keyframes per effetti più avanzati.
Quanti stop di colore può avere un gradiente?
Non c'è un limite rigido al numero di stop di colore in un gradiente CSS. In pratica, da 2 a 5 stop sono i più comuni. Più stop creano transizioni più fluide e complesse ma possono influire sulle prestazioni di rendering su dispositivi molto vecchi.