Generatore gradiente CSS
Crea gradienti CSS con anteprima
Come usare Generatore gradiente CSS
Crea gradienti CSS con anteprima Strumento gratuito online, senza registrazione, senza pubblicità invasiva. Usalo ora.
A cosa servono i gradienti CSS?
I gradienti CSS creano transizioni di colore fluide direttamente nel browser senza caricare file immagine. Sono un pilastro del design web moderno — permettono effetti visivi ricchi senza alcuna richiesta HTTP aggiuntiva, migliorando le performance e le metriche Core Web Vitals di Google.
- Sfondi delle sezioni hero: Gli sfondi a gradiente a tutta larghezza nelle landing page creano impatto visivo senza immagini pesanti. Un gradiente lineare dal colore primario al secondario del brand stabilisce l'identità visiva immediatamente.
- Stile dei pulsanti: Gli sfondi a gradiente nei pulsanti call-to-action aggiungono profondità e peso visivo.
background: linear-gradient(135deg, #7B35F5, #C040A0)è un esempio di gradiente diagonale vivace. - Testo con gradiente: Applicate i gradienti al testo con
background-clip: texte-webkit-text-fill-color: transparent— crea titoli visivamente d'impatto molto comuni sui siti web moderni. - Effetti di sovrapposizione: Una sovrapposizione a gradiente semitrasparente su un'immagine (da trasparente a nero) migliora la leggibilità del testo sovrapposto senza bloccare completamente l'immagine di sfondo.
- Barre di avanzamento e visualizzazione dati: I riempimenti a gradiente nelle barre di avanzamento e negli elementi dei grafici rendono i dati visivamente più attraenti e moderni.
Tipi di gradienti: linear-gradient(direzione, colore1, colore2) per i gradienti direzionali. radial-gradient(forma, colore1, colore2) per i gradienti circolari/ellittici. conic-gradient(colore1, colore2) per i gradienti a rotazione stile grafico a torta (CSS4 — supportato da tutti i browser moderni).
Frequently Asked Questions
Qual è la differenza tra gradienti lineari, radiali e conici?
I gradienti lineari fanno la transizione dei colori lungo una linea retta (dall'alto verso il basso, da sinistra a destra o qualsiasi angolo). I gradienti radiali irradiano da un punto centrale verso l'esterno in un cerchio o ellisse. I gradienti conici fanno la transizione attorno a un punto centrale — come la faccia di una ruota dei colori o un grafico a torta. Ognuno crea un effetto visivo fondamentalmente diverso.
Come creo un gradiente che si ripete?
Usate repeating-linear-gradient() o repeating-radial-gradient(). Specificate il gradiente con una lunghezza definita: repeating-linear-gradient(45deg, rosso 0px, rosso 10px, blu 10px, blu 20px) crea strisce diagonali. Senza una dimensione del pattern definita, i gradienti ripetuti si comportano come i gradienti regolari.
I gradienti possono essere animati con CSS?
I gradienti stessi non possono essere animati direttamente con CSS transition — background-image non è direttamente animabile. Alternative: usate background-position con background-size più grande per creare un'animazione di movimento, oppure usate le proprietà CSS personalizzate (variabili) per i colori e fate la transizione di queste variabili.
Cosa significa l'angolo del gradiente?
L'angolo in linear-gradient viene misurato in senso orario dall'alto. 0deg va verso l'alto (dal basso verso l'alto). 90deg va verso destra (da sinistra a destra). 180deg va verso il basso (dall'alto verso il basso). 45deg va diagonalmente verso il basso a destra. Potete anche usare parole chiave direzionali: to top, to bottom, to right, to bottom right, ecc.
Come creo un gradiente con più punti colore?
Aggiungete più valori di colore separati da virgola: linear-gradient(135deg, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). La percentuale controlla dove appare ogni colore. Senza percentuali, i punti sono distribuiti equamente. I punti colore possono sovrapporsi per creare transizioni nette invece di morbide.
Gradienti CSS vs gradienti SVG vs gradienti immagine
I gradienti CSS non richiedono file esterni, si scalano perfettamente e sono facili da animare — la prima scelta per gli sfondi e i semplici effetti di interfaccia. I gradienti SVG possono essere applicati alle forme e ai percorsi SVG — più flessibili per la grafica vettoriale complessa. I gradienti immagine (PNG, JPG) sono necessari per gli effetti molto complessi che il CSS non può riprodurre. Per gli sfondi web e gli elementi di interfaccia, i gradienti CSS devono sempre essere preferiti alle immagini per ragioni di performance.