Generi un gradiente CSS lineare o radiale

Crei un gradiente CSS riutilizzabile senza comporre manualmente la punteggiatura né dubitare della posizione di ogni stop. Scelga un gradiente lineare o radiale, indichi la direzione o la forma e aggiunga almeno due stop di colore ordinati. Ogni stop può contenere un colore CSS e una posizione facoltativa. Il risultato è un unico valore deterministico pronto per una dichiarazione background-image, un token di design, un foglio di stile o il codice di un’applicazione. Tipi, descrittori, posizioni e liste incomplete non validi vengono rifiutati con errori di input chiari.

Scelga la famiglia e la geometria del gradiente

Parta dal comportamento visivo desiderato. Un gradiente lineare procede lungo un asse, quindi il descrittore deve essere un angolo CSS come 135deg oppure una direzione con parole chiave come to right, to bottom o to top left. Un gradiente radiale si espande da un punto.

Il descrittore può indicare circle o ellipse, aggiungere facoltativamente una dimensione come closest-side o farthest-corner e impostare un’origine dopo at, per esempio circle at center oppure ellipse farthest-corner at 25% 40%. Tenere separata la geometria dai colori rende la richiesta semplice da verificare e riutilizzare. Il generatore controlla il descrittore in base alla famiglia scelta invece di unire alla cieca frammenti arbitrari.

In questo modo rileva errori come una forma radiale fornita a un gradiente lineare prima che il valore raggiunga un foglio di stile. Impedisce inoltre di nascondere nella geometria virgole o caratteri capaci di interrompere una dichiarazione. Scelga linear quando la transizione deve seguire una direzione definita e radial quando il disegno deve propagarsi da un punto focale.

Componga una lista ordinata di stop di colore

Aggiunga gli stop nell’ordine esatto in cui devono comparire nel CSS. Ogni stop richiede un colore e il gradiente completo ne richiede almeno due, perché una transizione non può esistere con un solo colore. Può usare i formati CSS più comuni, come nomi dei colori, valori esadecimali, rgb(), hsl() o la moderna notazione funzionale separata da spazi.

La posizione dello stop è facoltativa. Se viene omessa, il browser distribuisce gli stop non specificati secondo le regole CSS dei gradienti. Se viene indicata, deve contenere una o due lunghezze o percentuali CSS, come 0%, 12px oppure 30% 45%.

Due posizioni creano una fascia di colore netta usando lo stesso colore ai due limiti. Il generatore conserva l’ordine fornito; non ordina le posizioni e non reinterpreta la tavolozza, perché stop sovrapposti o discendenti possono produrre utili passaggi bruschi. Controlla anche il bilanciamento delle parentesi e rifiuta caratteri pericolosi per una dichiarazione.

Questa convalida mantiene prevedibile il risultato senza limitare le Sue scelte artistiche.

Utilizzi il valore generato in CSS e nelle automazioni

La risposta contiene un campo gradient il cui valore inizia con linear-gradient() o radial-gradient(). Lo assegni a background-image oppure alla proprietà abbreviata background quando non è necessario conservare altri livelli di sfondo. Può anche salvarlo in una proprietà personalizzata come --hero-gradient e riutilizzare il token tra più componenti.

Poiché la capacità esegue soltanto convalida deterministica e composizione di stringhe, lo stesso input produce sempre gli stessi spazi e lo stesso output. Questa stabilità è utile per la generazione di codice, i test snapshot, i creatori di temi e i sistemi di contenuti che confrontano i valori byte per byte. Nessuna chiamata di rete, scelta casuale, inferenza di modelli o lettura dell’orologio modifica il risultato.

Durante l’integrazione ricordi che lo strumento genera il valore immagine del gradiente, non una regola CSS completa: l’applicazione stabilisce selettore, proprietà, alternative, dimensioni e qualsiasi colore pieno di riserva.