Come generare un gradiente CSS lineare o radiale

A cosa serve il generatore di gradienti CSS

Il generatore prepara testo CSS per creare un gradiente lineare o radiale a partire da due valori colore e, quando serve, da un angolo. È utile se vuoi impostare uno sfondo nel foglio di stile senza comporre manualmente la funzione CSS, oppure se stai confrontando più combinazioni cromatiche per una pagina.

Puoi iniziare dai valori già disponibili e usarli come punto di riferimento, oppure sostituirli con quelli scelti per il progetto. Quando il primo colore non viene fornito, il valore utilizzato è #ff6b6b; per il secondo viene usato #4ecdc4. Anche le impostazioni iniziali del tipo e dell’angolo sono definite: il tipo è linear e l’angolo è di 45 gradi. In questo modo puoi ottenere un primo risultato anche prima di personalizzare ogni campo.

La scelta tra lineare e radiale riguarda la forma del gradiente. Nel primo caso l’output tiene conto dell’angolo; nel secondo produce una forma circolare con i due colori indicati. La guida è pensata per chi deve trasformare una coppia di colori in una dichiarazione CSS da inserire nel proprio lavoro.

Come generare il gradiente

1. Inserisci il primo colore nel controllo dedicato. Per esempio, puoi usare #6c5ce7. Il valore viene trattato come testo da inserire nel CSS, quindi riportalo nella sintassi che intendi usare nel tuo foglio di stile.
2. Inserisci il secondo colore, ad esempio #00cec9. I due valori costituiscono gli estremi cromatici usati dal risultato. Se lasci uno dei campi senza valore, viene applicato il relativo valore iniziale: #ff6b6b per il primo e #4ecdc4 per il secondo.
3. Seleziona il tipo di gradiente. Scegli linear quando vuoi una transizione lineare e usa il valore radial quando vuoi la forma radiale circolare. Questi valori determinano il formato prodotto.
4. Per un gradiente lineare, inserisci l’angolo in gradi. Il valore viene convertito in un numero intero e ridotto modulo 360, così l’orientamento viene espresso nell’intervallo circolare corrispondente. Se il contenuto non può essere convertito, viene utilizzato l’angolo predefinito di 45 gradi. Per un gradiente radiale, invece, l’angolo non determina la struttura circolare del risultato.
5. Avvia la generazione e usa il testo CSS ottenuto nel punto del foglio di stile in cui ti serve il gradiente. Prima di inserirlo nel progetto, confronta i colori e l’orientamento con l’effetto che vuoi ottenere.

Se vuoi fare una prova rapida, lascia inizialmente i campi vuoti e conserva il tipo linear: il risultato partirà dai due colori predefiniti e dall’angolo di 45 gradi. In seguito puoi cambiare un solo valore alla volta, per capire quale impostazione modifica l’aspetto desiderato. Per una variante circolare, imposta radial e considera soprattutto la coppia di colori, perché la struttura radiale non usa l’angolo come parametro determinante.

Come leggere il risultato e quali sono i limiti

Il risultato è testo CSS relativo a un gradiente. Con linear, il formato usa l’angolo espresso in gradi insieme ai due valori colore forniti. Un angolo di 135, per esempio, viene mantenuto come orientamento intero dopo la conversione e la normalizzazione prevista. Con radial, il risultato usa invece una forma radiale circolare e i due colori indicati, senza trasformare l’angolo nella direzione della forma.

Il tipo di gradiente deve quindi essere scelto con attenzione. Un valore diverso da linear o radial non produce un terzo formato: viene usata la struttura lineare, mentre il valore fornito del tipo resta parte dei dati restituiti. Se stai cercando un effetto radiale, usa proprio radial.

Controlla anche il testo dei colori prima di utilizzarlo. I valori forniti vengono inseriti nel CSS senza un controllo separato che stabilisca se siano colori CSS validi. Un testo non adatto può quindi comparire nell’output e richiedere una correzione manuale. Il generatore prepara la struttura del gradiente, ma la correttezza dei valori colore va verificata nel contesto del tuo foglio di stile.

Esempio pratico

Stai preparando lo sfondo di un’intestazione e vuoi una transizione lineare tra viola e turchese orientata a 135 gradi.

Imposta #6c5ce7 come primo colore, #00cec9 come secondo colore, scegli linear e inserisci 135 come angolo; poi genera il CSS.

Il risultato ha la forma di testo CSS per un gradiente lineare, con angolo di 135 gradi e i due valori colore indicati.

Limiti

• I colori non ricevono una validazione CSS separata e i tipi diversi da linear o radial seguono la struttura lineare.

Errori comuni

• Se l’angolo contiene testo che non può essere convertito in numero, il risultato usa 45 gradi. Inserisci un valore numerico intero, come 120, e controlla l’orientamento prodotto prima di usarlo.

Domande frequenti

Posso creare un gradiente radiale?

Sì, a condizione di usare il valore radial: produce un gradiente radiale circolare con i due colori forniti. Un valore diverso da linear o radial usa invece la struttura lineare.

Quale angolo viene usato se non ne inserisco uno?

Se non fornisci un angolo, viene usato 45 gradi. Un valore convertibile viene trasformato in intero e ridotto modulo 360; se la conversione fallisce, viene applicato nuovamente 45.

Lo strumento verifica che i colori siano validi?

No: il testo fornito viene inserito nel CSS senza una verifica separata che stabilisca se sia un colore CSS valido. Controlla quindi i valori prima di usare il risultato.