Come generare gradienti CSS con tipo, direzione e colori

A cosa serve il generatore di gradienti CSS

Questo strumento serve a preparare rapidamente codice CSS per sfondi con sfumatura lineare o radiale. È utile quando vuoi impostare il tipo di sfumatura, la direzione e una sequenza di colori senza scrivere manualmente la funzione CSS. Puoi lasciare vuoti gli input opzionali: in quel caso vengono usati i valori predefiniti, cioè sfumatura lineare, direzione to right e colori #ff7e5f, #feb47b.

Come generare il codice CSS

1. Apri lo strumento e individua i campi per il tipo di sfumatura, la direzione e i colori.
2. Nel campo del tipo inserisci linear se vuoi un gradiente lineare. Per questo tipo, il testo indicato nella direzione viene inserito nel codice generato. Per ottenere il comportamento radiale, usa un valore diverso da linear: il risultato adotterà una forma circolare.
3. Nel campo della direzione scrivi, per esempio, to bottom, to left oppure un’altra direzione testuale che desideri trasferire al codice. La direzione viene utilizzata nel ramo lineare, quindi controlla che il tipo sia scritto esattamente come previsto.
4. Inserisci i colori separandoli con virgole, ad esempio #2563eb, #7c3aed, white. Lo strumento divide il testo sulle virgole, rimuove gli spazi iniziali e finali da ogni elemento e ricompone l’elenco usando una virgola seguita da uno spazio.
5. Avvia la generazione e copia il codice CSS prodotto nel foglio di stile o nella regola dell’elemento a cui vuoi applicare lo sfondo. Se lasci gli input opzionali senza valori, il risultato usa le impostazioni predefinite indicate sopra.

Come leggere il risultato

Il risultato è codice CSS per una sfumatura. Quando il tipo è esattamente linear, cerca nel blocco generato la direzione che hai fornito e verifica che la sequenza dei colori sia stata ricomposta con la spaziatura prevista. Quando il tipo contiene un valore diverso da linear, interpreta il risultato come una sfumatura radiale con forma circolare, anche se nel campo della direzione hai scritto un testo.

Il campo dei colori viene trattato come testo: la procedura separa gli elementi in base alle virgole e sistema gli spazi attorno a ciascuno. Non considerare questo comportamento una verifica della sintassi dei colori o della direzione. Prima di usare il codice, controlla quindi che i valori inseriti siano compatibili con il CSS che stai preparando.

Esempio pratico

Stai preparando lo sfondo verticale di un’intestazione e vuoi passare da un blu a un viola fino al bianco.

Inserisci linear come tipo, to bottom come direzione e #2563eb, #7c3aed, white nel campo dei colori, poi avvia la generazione.

Il risultato ha la forma di un blocco di codice CSS per una sfumatura lineare: include la direzione to bottom e i tre colori ricomposti in sequenza con virgola e spazio.

Limiti

• Gli input vengono elaborati come testo: il comportamento descritto non stabilisce una verifica della sintassi dei colori o della direzione. Controlla quindi i valori prima di utilizzare il CSS generato.

Errori comuni

• Se compare una sfumatura radiale invece di una lineare, il tipo inserito non corrisponde esattamente a linear. Correggi il valore del tipo e genera di nuovo il codice.

Domande frequenti

Posso scegliere la direzione di un gradiente lineare?

Sì, quando il tipo inserito è esattamente linear, la direzione testuale fornita viene inclusa nel codice della sfumatura lineare.

Cosa succede se inserisco un tipo diverso da linear?

Quando il tipo è diverso da linear, il risultato usa una sfumatura radiale con forma circolare. La direzione non determina una variante lineare in questo caso.

Come devo separare i colori?

Inserisci i colori separati da virgole. Gli spazi attorno ai singoli elementi vengono rimossi e l’elenco viene ricomposto con una virgola e uno spazio; lo strumento non verifica la sintassi dei valori inseriti.