Crea gradienti CSS lineari, radiali o conici con anteprima in tempo reale. Regola colori e direzione, poi copia il CSS.
Scegli un tipo di gradiente (lineare, radiale o conico), aggiungi stop di colore, regola le posizioni e vedi il risultato dal vivo. La proprietà CSS background generata è pronta da copiare e incollare nel progetto. Aggiungi tutti gli stop che vuoi.
Seleziona un tipo di gradiente, regola l’angolo (per lineare/conico), clicca i campioni per cambiare colore e trascina i cursori per impostare le posizioni. Clicca + Aggiungi colore per aggiungere altri stop. Copia il CSS dal blocco di codice scuro a destra.
I gradienti danno valore quando aiutano a creare atmosfera, profondità o enfasi senza aggiungere un asset immagine completo. L’utilità pratica di un generatore sta nella velocità: puoi confrontare direzione, posizioni degli stop e tipo di gradiente abbastanza in fretta da prendere decisioni di design mentre l’idea è ancora fresca.
Questo strumento mantiene quell’esplorazione sul piano visivo e produce CSS che puoi riutilizzare una volta trovato il risultato giusto.
I gradienti possono aggiungere profondità e movimento senza il peso di un’immagine, ma le superfici grandi rendono anche molto evidenti stop mal posizionati e transizioni fangose.
Bottoni, banner e pannelli evidenziati possono beneficiare di gradienti sottili, ma possono anche sembrare datati molto in fretta se la transizione è troppo aggressiva.
Usare colori di brand approvati in un gradiente sembra semplice finché il mix al centro smette di sembrare davvero il brand.
La maggior parte dei gradienti migliora quando parte in modo semplice. Più stop non significa automaticamente più raffinatezza.
Angoli e percentuali degli stop sono difficili da valutare in astratto. È l’anteprima live che li trasforma in una decisione di design.
Un gradiente può apparire bene da solo e funzionare male appena ci metti sopra testo, icone o card.
Qui i gradienti spesso si guadagnano il loro posto: danno atmosfera a una pagina senza richiedere un’immagine pesante.
Se più componenti devono condividere lo stesso linguaggio visivo, copiare un valore CSS esatto è più pulito che approssimarlo a mano in più punti.
Questi tipi possono essere efficaci visivamente, ma è anche facile esagerare. Un generatore ti aiuta a scoprirlo subito.
Questo strumento genera CSS per gradienti. Non decide colori di primo piano accessibili, non costruisce un sistema colore completo e non dice se l’effetto si adatta al tuo layout. Fornisce un valore utile di gradiente, non l’intero giudizio di design.
I gradienti sono facili da aggiungere e sorprendentemente facili da sbagliare. Il valore di un generatore non sta solo nella velocità, ma nel ridurre iterazioni sprecate su dettagli di sintassi evitabili.
Un gradiente conico ruota i colori attorno a un punto centrale. È utile per grafici a torta, ruote dei colori, effetti di quadrante e qualsiasi design in cui le transizioni di colore avvengono con un movimento circolare piuttosto che lineare.
Tutti quelli che desideri — clicca su + Aggiungi colore per inserire stop aggiuntivi. Il CSS è valido indipendentemente dal numero di stop utilizzati.
Questo strumento gira interamente nel tuo browser. Nulla di ciò che digiti o incolli viene inviato a un server — tutta l'elaborazione avviene localmente sul tuo dispositivo.