Come si usa
- Parti da un predefinito o dal gradiente iniziale.
- Fai clic sulla barra per aggiungere colori; trascina i punti per spostarli.
- Scegli Lineare, Radiale o Conica e regola l'angolo o il centro.
- Copia la dichiarazione CSS o la classe Tailwind.
Opzioni spiegate
- Lineare
- I colori cambiano lungo una linea retta. 0° va verso l'alto, 90° verso destra e 180° verso il basso.
- Radiale
- I colori si diffondono da un punto centrale come un cerchio o un'ellisse che si adatta all'elemento.
- Conica
- I colori ruotano attorno a un punto centrale come in una ruota dei colori o in un grafico a torta.
- Ripeti
- Ripete il motivo; imposta i punti in un intervallo breve, ad esempio da 0% a 10%, per creare delle strisce.
Che aspetto ha il codice generato
Gli stessi due colori, scritti da ciascun tipo. Gli stop sono sempre scritti con una posizione in percentuale:
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)La versione Tailwind racchiude lo stesso valore in una classe con valore arbitrario. Gli spazi diventano trattini bassi e gli spazi dopo le virgole vengono rimossi:
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]Nell’ultima riga CSS il motivo si ripete ogni 10% dell’elemento, creando strisce sottili. Nei gradienti conici l’angolo è il punto da cui parte la rotazione, e nei gradienti radiali le due percentuali sono il centro.
Domande frequenti
Quali browser supportano questi gradienti?
I gradienti lineari, radiali e conici funzionano in tutte le versioni attuali di Chrome, Edge, Firefox e Safari, senza prefissi proprietari.
Come creo un gradiente trasparente?
Digita un colore con canale alfa, ad esempio #00000000 per un nero completamente trasparente, nel campo del colore di un punto.
Come uso la classe Tailwind?
Aggiungila all'elenco delle classi di un elemento in Tailwind CSS 3 o 4. Usa un valore arbitrario, quindi non serve alcuna configurazione.
Privacy
Questo strumento funziona interamente nel tuo browser. File e testi vengono elaborati sul tuo dispositivo e non vengono mai caricati sui nostri server.