Generatore CSS Gradient Gratuito
Questo generatore CSS gradient gratuito crea una sfumatura lineare o radiale da due o tre colori e un angolo, mostra un'anteprima e ti fornisce il CSS da copiare, incluso un fallback a colore solido per i browser vecchi. È perfetto per designer e sviluppatori che vogliono uno sfondo per una sezione hero, un pulsante o una card senza scrivere la sintassi manualmente.
CSS Gradient Generator
Generators and Converters
Informazioni su questo strumento
Un gradiente CSS è un'immagine di sfondo creata dal browser, quindi non richiede download e rimane nitido a qualsiasi dimensione. La sintassi è breve ma facile da dimenticare: linear-gradient accetta un angolo e un elenco di colori, mentre radial-gradient diffonde i colori verso l'esterno da un punto centrale.
Scegli lo stile, imposta l'angolo per un gradiente lineare e seleziona due colori. Attiva il terzo colore per una sfumatura a tre tappe; le tappe sono distribuite uniformemente. La pagina disegna un'anteprima dagli stessi valori e stampa una regola di sfondo con un colore semplice per primo, così i browser che non riescono a disegnare gradienti mostrano comunque qualcosa di sensato. Gli angoli seguono la regola CSS: 0 gradi punta verso l'alto, 90 verso destra, 180 verso il basso.
Presta attenzione al contrasto quando il testo si trova su un gradiente: verifica le parti più chiare e più scure rispetto al colore del testo con il selettore di colore. I gradienti con tonalità molto diverse possono apparire opachi nel mezzo, quindi prova un terzo colore che si trova tra loro. Nulla di quello che scegli viene memorizzato.
Domande frequenti
Cosa significa l'angolo in un gradiente lineare?
È la direzione del cambio di colore. Zero gradi punta verso l'alto, 90 gradi verso destra, 180 gradi verso il basso e 270 gradi verso sinistra. Una diagonale come 135 gradi va da in alto a sinistra verso in basso a destra.
Perché il CSS include un colore solido per primo?
È un fallback. Un browser che non riesce a disegnare gradienti ignora la linea di gradiente e utilizza il colore semplice sopra di esso, quindi lo sfondo non è mai vuoto. Tutti i browser attuali supportano i gradienti, quindi questo copre solo quelli molto vecchi.
Qual è la differenza tra lineare e radiale?
Un gradiente lineare cambia colore lungo una linea retta all'angolo che scegli. Un gradiente radiale inizia dal centro e cambia colore verso l'esterno in un cerchio o un'ellisse, il che è adatto per faretti, pulsanti e bagliori morbidi.
Posso usare più di tre colori?
Questo strumento crea due o tre tappe, il che copre la maggior parte dei progetti. Per di più, copia il CSS e aggiungi tappe di colore extra manualmente, separate da virgole, facoltativamente con una posizione come #ff0000 40%.