Generatore di sfumature CSS
Crea codice CSS per sfumature lineari o radiali combinando due colori e un angolo di inclinazione personalizzato.
Esegui lo strumento
Questo generatore online crea codice CSS per sfumature lineari e radiali a partire da due valori cromatici. Puoi impostare la tonalità iniziale, la tonalità finale e l'angolo di inclinazione in gradi. Lo strumento converte l'angolo in un numero intero ridotto nell'intervallo da zero a 359 gradi, applicando il valore base di 45 gradi se il testo inserito non contiene cifre valide. Per le sfumature lineari, la dichiarazione CSS include l'orientamento specificato e la sequenza cromatica indicata. Quando imposti la tipologia radiale, ottieni una sfumatura circolare che distribuisce le due tinte dal centro verso l'esterno. Il sistema inserisce i valori cromatici direttamente nella stringa di stile generata; puoi usare codici esadecimali, nomi colore o notazioni funzionali. Se lasci vuoti i campi, il generatore applica le impostazioni iniziali, permettendo di copiare subito la regola CSS pronta per pulsanti, schede e sezioni grafiche di siti web.
Istruzioni
- Inserisci il primo colore nel campo iniziale, indicando un codice esadecimale o un valore CSS valido.
- Specifica il secondo colore nel campo successivo per definire la seconda estremità del gradiente.
- Indica l'angolo di inclinazione in gradi per regolare la direzione del passaggio cromatico lineare.
- Scegli la tipologia di gradiente tra lineare e radiale in base allo stile visivo desiderato.
- Copia il codice CSS generato per inserirlo nei tuoi fogli di stile o nelle proprietà di sfondo del sito.
Esempi
- Con il primo colore impostato su #ff6b6b, il secondo colore su #4ecdc4, angolo a 45 gradi e tipo lineare, il generatore produce la regola CSS linear-gradient(45deg, #ff6b6b, #4ecdc4).
- Selezionando la tipologia radiale con i colori #001122 e #336699, ottieni la stringa CSS radial-gradient(circle, #001122, #336699) per uno sfondo circolare.
FAQ
Quali formati di colore posso inserire?
Puoi indicare valori esadecimali come #ff6b6b, notazioni RGB, HSL oppure nomi di colore standard supportati dai fogli di stile.
Cosa accade se inserisco un valore non numerico per l'angolo?
Se il valore dell'angolo non può essere convertito in un numero intero, lo strumento imposta automaticamente l'inclinazione predefinita di 45 gradi.
Come funziona la conversione per angoli superiori a 360 gradi?
Lo strumento calcola l'angolo modulo 360, riportando qualsiasi valore intero nell'intervallo geometrico standard tra 0 e 359 gradi.
Quale formato genera lo strumento se indico un tipo diverso da radiale?
Qualsiasi valore diverso dalla tipologia radiale produce una sfumatura di tipo lineare con l'angolo specificato.