Softonic

Generatore di Gradient CSS

Passaggio 1 / 2
Avanti

Un gradiente può dare a pulsanti, card, sezioni hero e badge un aspetto curato senza alcun file immagine. Questo generatore scrive il CSS al posto tuo: scegli un gradiente lineare o radiale, seleziona due colori, imposta l’angolo quando serve e copia la dichiarazione background risultante direttamente nel tuo foglio di stile.

Come creare un gradiente

  1. 1

    Scegli il tipo di gradiente

    Lineare per una transizione rettilinea lungo un angolo, oppure radiale per diffondere i colori verso l'esterno da un punto centrale.

  2. 2

    Scegli due colori

    Inserisci due colori esadecimali (ad esempio #2563eb e #16a34a) nei due campi colore.

  3. 3

    Imposta l'angolo (solo lineare)

    L'angolo in gradi: 0deg punta verso l'alto, 90deg verso destra, 180deg verso il basso. I gradienti radiali ignorano l'angolo.

  4. 4

    Genera il CSS

    Lo strumento costruisce la dichiarazione `background:` con i tuoi valori.

  5. 5

    Copia il codice

    Copia la riga di dichiarazione e incollala nel tuo foglio di stile, dentro la regola dell'elemento da personalizzare.

Gradienti lineari

background: linear-gradient(135deg, #2563eb, #16a34a);

L’angolo procede in senso orario partendo dall’alto: 0deg = alto, 90deg = destra, 180deg = basso, 270deg = sinistra. Puoi anche scrivere direzioni con nome a mano: to right equivale a 90deg e to bottom left a 135deg.

Gradienti radiali

background: radial-gradient(circle, #2563eb, #16a34a);

I colori si diffondono dal centro dell’elemento verso l’esterno. I gradienti radiali non usano l’angolo; aggiungi parole chiave di posizione o dimensione a mano (at 30% 40%, ellipse) quando ti serve più controllo.

Punti di colore

I gradienti CSS accettano più di due colori e ogni punto può avere una posizione:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

Due punti nella stessa posizione creano un confine netto: il colore cambia all’istante invece di fondersi. Utile per sfondi divisi.

Consigli

  • Un gradiente dal rosso al blu passa per un punto medio grigiastro con l’interpolazione sRGB predefinita. Interpolare in oklch mantiene la mescolanza colorata: linear-gradient(in oklch, red, blue), supportato dai browser moderni.
  • transparent non è incolore: in sRGB è rgba(0,0,0,0), quindi uno sfumato verso trasparente passa dal grigio scuro. Usa rgba(color, 0) al suo posto.
  • I gradienti vengono renderizzati sulla GPU nei browser moderni, quindi costano quasi nulla a qualsiasi dimensione. Animare tra gradienti non è supportato e cambia di colpo; anima invece l’opacità di un livello extra.
  • Riempimento del testo: combina la dichiarazione con background-clip: text; color: transparent; per riempire il testo con un gradiente. Per i bordi, border-image: linear-gradient(...) 1; funziona nei browser moderni.

Domande frequenti

Lineare per le mescolanze direzionali, come un pulsante o una hero che scorre dall’alto in basso o da un angolo all’altro. Radiale per gli effetti di riflettore e bagliore, dove i colori si diffondono da un punto centrale.

L’angolo imposta la direzione della transizione per i gradienti lineari: 0deg punta verso l’alto, 90deg verso destra e così via in senso orario. I gradienti radiali ignorano l’angolo.

L’interpolazione sRGB predefinita fa la media delle componenti di colore, producendo un punto medio desaturato. Interpola in oklch invece (linear-gradient(in oklch, red, blue)) per mantenere la mescolanza colorata al centro.

Il CSS non può interpolare tra due valori di background-image, il cambio è brusco. Soluzioni comuni: animare l’opacità di un gradiente sovrapposto, oppure spostare background-position su un gradiente fisso più grande.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Generatore di Palette di Colori

Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.