I fondamenti dei gradienti CSS
I gradienti CSS consentono di visualizzare transizioni sfumate tra due o più colori. Il comportamento e la resa visiva di un gradiente dipendono da tre fattori principali: il tipo di gradiente, la direzione o forma geometrica dello sviluppo del colore, e la disposizione dei punti di colore (color stops) lungo il percorso di sfumatura.
Capire i gradienti lineari: direzione e punti di colore
Un gradiente lineare sfuma i colori lungo una linea retta. La direzione di questa linea viene determinata da un valore numerico espresso in gradi.
Le regole di orientamento dell'angolo seguono una convenzione precisa:
- 0° punta direttamente verso l'alto.
- 90° punta verso destra.
I colori si distribuiscono in modo sequenziale lungo questo asse angolare, partendo dal primo punto di colore posizionato all'inizio della linea fino all'ultimo punto posizionato alla fine.
Esplorare i gradienti radiali: forme e distribuzione del colore
A differenza dei gradienti lineari, un gradiente radiale non utilizza un angolo per determinare la direzione. I colori si diffondono invece verso l'esterno a partire da un punto centrale.
La distribuzione del colore è definita dalla selezione della forma geometrica, che può essere:
- Ellisse (forma ellittica).
- Cerchio (forma circolare).
La transizione cromatica si sviluppa in modo concentrico dal centro verso i bordi esterni della forma selezionata.
Gradienti conici: rotazione attorno a un punto centrale
Un gradiente conico dispone i colori facendoli ruotare attorno a un punto centrale, con un effetto simile a quello di una ruota cromatica o di un grafico a torta.
La transizione dei colori avviene in senso orario attorno al centro. Come per i gradienti lineari, la direzione iniziale della transizione viene definita tramite un valore angolare espresso in gradi, dove 0° rappresenta la posizione verticale rivolta verso l'alto e 90° indica la posizione rivolta verso destra.
Il ruolo dei punti di colore nella progettazione dei gradienti
I punti di colore (color stops) definiscono quali tinte compongono il gradiente e dove avvengono le transizioni. Ogni punto è composto da due parametri:
- Colore del punto: il valore cromatico specifico.
- Posizione: un valore percentuale compreso tra 0% (inizio del gradiente) e 100% (fine del gradiente).
Il generatore gestisce la distribuzione dei punti con regole precise:
- Il gradiente iniziale predefinito include due punti di colore:
#6366f1posizionato a0%e#ec4899posizionato a100%. - È possibile aggiungere fino a un massimo di otto punti di colore per creare sfumature complesse.
- Ogni nuovo punto di colore aggiunto assume automaticamente una posizione predefinita pari a
50%. - Quando sono presenti otto punti di colore, il pulsante per aggiungerne altri viene disabilitato.
Come utilizzare lo strumento Generatore di Gradienti
L'interfaccia dello strumento consente di configurare visivamente ogni parametro del gradiente e di ottenere il codice CSS pronto per l'uso.
Configurazione dei parametri
- Tipo di gradiente: Sotto la voce "Tipo di gradiente", selezionare una delle tre opzioni disponibili: "Lineare", "Radiale" o "Conico".
- Regolazione geometrica:
- Se si seleziona "Lineare" o "Conico", utilizzare il cursore "Angolo" per impostare la direzione in gradi.
- Se si seleziona "Radiale", scegliere la geometria desiderata sotto la voce "Forma", selezionando tra "Ellisse" e "Cerchio".
- Gestione dei punti di colore: Sotto la sezione "Punti di colore", è possibile modificare i colori esistenti e regolare il cursore "Posizione" (da 0% a 100%) per ciascun punto. Per inserire un nuovo colore, fare clic su "Aggiungi punto di colore" (fino a un massimo di otto). Per rimuovere un punto non necessario, utilizzare l'opzione "Rimuovi punto di colore".
Anteprima e copia del codice
Durante ogni modifica, l'interfaccia mostra un'anteprima visiva in tempo reale del gradiente. Una volta ottenuto il risultato desiderato, scorrere fino alla sezione "CSS" e fare clic sul pulsante "Copia CSS". Dopo il clic, lo stato del pulsante cambierà in "Copiato" per confermare che il codice è stato copiato negli appunti.
Ogni gradiente viene renderizzato direttamente nel Suo browser. Nessun dato impostato viene caricato su BroBroGo.