Crea il tuo gradiente
Inserisci HEX, rgb(), hsl() o un nome colore CSS supportato. La trasparenza non è supportata.
Gradiente lineare: 2 colori, 90°.
Usa gradi interi da 0 a 360. 0° indica l’alto, 90° destra, 180° il basso e 270° sinistra.
Un punto intermedio a 0% o 100% può creare un confine netto tra i colori.
Preparazione dell’editor. Finché non è pronto, i valori mostrati sono un esempio fisso.
Come si usa
- Scegli due colori. Attiva 3 colori per usare, nell’ordine mostrato, un colore iniziale, uno intermedio e uno finale.
- Scegli lineare o radiale. Regola l’angolo per il gradiente lineare e la posizione intermedia quando usi 3 colori.
- Seleziona un punto di colore per copiarne il valore, oppure copia il valore CSS, la dichiarazione CSS o il link di condivisione.
Formati colore supportati
Inserisci HEX, rgb(), hsl() o un nome colore CSS supportato. La trasparenza non è supportata.
Con 3 colori, il secondo diventa il colore intermedio e il terzo il colore finale.
Il gradiente radiale è circolare e centrato nell’elemento. Non prevede un angolo.
Incolla la dichiarazione in una regola CSS. Per i gradienti si usa background-image, non background-color.
I valori HSL sono arrotondati. Usa HEX per conservare il colore esatto a 8 bit.
Controlla il testo rispetto a tutti i colori dello sfondo su cui compare. Controllare solo i colori alle estremità non basta per valutare il contrasto dell’intero gradiente.
Domande frequenti
Quali formati colore posso inserire?
HEX, rgb(), hsl(), nomi CSS comuni supportati e terne RGB numeriche come 37, 99, 235. Non sono supportati la trasparenza, le funzioni colore ad ampia gamma e tutti i nomi colore CSS.
Che cosa cambia con 3 colori?
Il primo resta a 0%. Il secondo diventa il colore intermedio nella posizione scelta e il terzo diventa il colore finale a 100%. Un terzo colore aggiunge un passaggio di colore al gradiente, ma non garantisce transizioni più morbide o una migliore leggibilità.
Posso spostare il centro del gradiente radiale?
Non in questa versione. Il gradiente radiale è un cerchio centrato nell’elemento. L’angolo si applica solo ai gradienti lineari.
Che cosa contiene il link di condivisione?
Contiene i colori attivi, il tipo di gradiente, l’angolo se lineare, la posizione intermedia se usi 3 colori e il punto di colore selezionato. Non salva bozze nascoste o cronologia. I vecchi link vengono letti quando possibile.
Lo strumento verifica il contrasto del testo sul gradiente?
No. Lo sfondo cambia lungo il gradiente, quindi non basta controllare i colori alle estremità. Verifica lo sfondo effettivo sotto tutta l’area del testo.
Posso esportare un’immagine o un file di progettazione?
No. Puoi copiare il valore CSS, una dichiarazione background-image, i singoli valori colore e un link di condivisione. Non sono previsti file PNG, SVG o di progettazione.