DevToolPal
IT

Generatore di gradienti CSS

Crea visivamente gradienti CSS lineari, radiali e conici con stop di colore, angolo e posizione, anteprima dal vivo, preset e CSS pronto da copiare.

Eseguito in locale, mai caricato

Gradiente

Tipo
Stop di colore

Anteprima

CSS

Preset
CSS del gradiente
 
 
 
 
 
Cosa fa


Il generatore di gradienti CSS ti permette di comporre un gradiente a occhio e copiare il CSS finale. Scegli un gradiente lineare, radiale o conico, aggiungi tutti gli stop di colore che vuoi, trascina le loro posizioni, imposta l’angolo o il centro e l’anteprima si aggiorna subito. Puoi anche incollare un linear-gradient(…), radial-gradient(…) o conic-gradient(…) esistente per modificarlo visivamente. Tutto avviene nel browser.


Come si usa


    

  1. Parti da un preset o tieni il gradiente di esempio.
    2. 

  2. Scegli il Tipo. I gradienti lineari e conici hanno un angolo; quelli radiali e conici hanno un centro che sposti con Centro X e Centro Y.
    3. 

  3. Modifica gli Stop di colore: cambia un colore con il selettore o scrivi qualsiasi colore CSS, trascina Posizione per spostarlo, usa + Aggiungi stop per inserirne uno nell’intervallo più ampio e Inverti per rovesciare l’ordine.
    4. 

  4. Attiva Ripeti per ripetere il gradiente a mosaico e creare strisce e anelli.
    5. 

  5. Copia il codice dalla scheda CSS, se vuoi con un colore pieno di riserva per i browser molto vecchi.
    6. 



La casella CSS del gradiente in basso mostra il valore del gradiente ed è modificabile: incolla un gradiente dal tuo foglio di stile o da uno strumento di design e i controlli lo recepiscono.


Esempio


.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


Consigli per gradienti riusciti


    

  • Meglio sobri. Due tonalità vicine (dal blu al viola, dall’arancione al rosa) risultano più morbide dei colori opposti, che al centro possono diventare un grigio spento.
    • 

  • Aggiungi uno stop intermedio per controllare la fusione. Un terzo stop un po’ più chiaro dei vicini crea un riflesso morbido.
    • 

  • Gli stop netti creano forme. Stop nella stessa posizione producono bordi netti: strisce, bandiere, barre di avanzamento e grafici a torta usano questo trucco.
    • 

  • Direzioni. to right equivale a 90deg e to bottom (il valore predefinito) a 180deg. Gli angoli si misurano in senso orario a partire dall’alto.
    • 

  • Il testo su un gradiente deve restare leggibile su tutta la sua estensione. Confronta lo stop più chiaro e quello più scuro con il colore del testo usando un verificatore di contrasto.
    • 

 
  
 
Domande frequenti
 
 
  › Che differenza c’è tra gradienti lineari, radiali e conici?  
Un gradiente lineare fonde i colori lungo una retta inclinata di un certo angolo. Uno radiale si espande da un punto centrale come cerchio o ellisse. Uno conico ruota attorno a un centro come le lancette di un orologio, perfetto per ruote dei colori e grafici a torta.
 
  › Come ottengo strisce nette invece di una sfumatura?  
Dai a due stop vicini la stessa posizione, per esempio red 50% e blue 50%. Il colore cambia di colpo in quel punto. Attiva Ripeti per ripetere il motivo: è così che si fanno le strisce in CSS.
 
  › Posso usare colori trasparenti?  
Sì. In uno stop puoi scrivere qualsiasi colore CSS, compresi rgba(), hsl() con alfa, esadecimale a 8 cifre o transparent. Il selettore mantiene l’alfa impostato e l’anteprima mostra una scacchiera dietro le zone trasparenti.
 
  › Servono ancora prefissi o un colore di riserva?  
I prefissi non servono: tutti i browser attuali supportano gradienti lineari, radiali e conici senza prefisso. Il colore pieno di riserva facoltativo conta solo per browser molto vecchi o per strumenti che leggono background-color, come alcuni client di posta.