Come si usa
- In Tipo, scegli Lineare, Radiale o Conico.
- Regola Angolo per Lineare o Conico. Per Radiale scegli Forma; per Radiale o Conico scegli anche Posizione.
- Imposta i colori in Punti colore; usa + Aggiungi punto colore per aggiungerne uno.
- Trascina i marcatori sulla barra per distribuire i colori e controlla l’anteprima, che si aggiorna dal vivo.
- Premi Copia CSS per copiare la dichiarazione background, oppure Copia valore per copiare solo la funzione del gradiente.
Esempi
Sfondo per un negozio online
Input
Gradiente lineare a 90°: blu #2451E8 allo 0%, viola #6B4EFF al 100%.
Output
background: linear-gradient(90deg, #2451E8 0%, #6B4EFF 100%);
Alone per un banner promozionale
Input
Gradiente radiale ellittico in alto a sinistra: arancio #F97316 allo 0%, lo stesso colore trasparente al 100%.
Output
background: radial-gradient(ellipse at top left, #F97316 0%, rgba(249, 115, 22, 0) 100%);
Sfondo a righe per una sezione offerte
Input
Gradiente lineare ripetuto a 90°: crema #FFF7ED allo 0% e al 10%, arancio #FDBA74 al 10% e al 20%.
Output
background: repeating-linear-gradient(90deg, #FFF7ED 0%, #FFF7ED 10%, #FDBA74 10%, #FDBA74 20%);
Suggerimenti
- Scegli colori precisi e verifica il contrasto con Codici colori HTML.
- Prova il gradiente in una pagina con l'Editor HTML.
Domande frequenti
Perché Ripetuto non cambia il gradiente?
Se l’ultimo punto colore è al 100%, Ripetuto non ha un effetto visibile. Spostalo a una percentuale inferiore, per esempio al 25%.
Quali codici colore posso inserire?
Puoi usare #RGB, #RGBA, #RRGGBB o #RRGGBBAA, anche senza # e con lettere minuscole. Il canale alfa imposta l’opacità del punto; rgb(), hsl() e i nomi dei colori non sono accettati.
Quanti colori posso usare in un gradiente?
Puoi usare da 2 a 8 punti colore. Con 2 punti la rimozione è disabilitata; con 8 non puoi aggiungerne altri.
Il gradiente rimane salvato quando chiudo la pagina?
L’ultima configurazione valida viene salvata nel localStorage del browser e ripristinata alla visita successiva. Reimposta elimina lo stato salvato e ripristina il gradiente iniziale.