Come generare un gradiente CSS
Usa questa pagina per creare un'immagine di sfondo non ripetuta da punti colore espliciti. La prima schermata mantiene visibile ogni valore per riprodurre il CSS senza un editor a trascinamento.
- Scegli Lineare o Radiale.
- Scegli due, tre o quattro punti.
- Inserisci colore HEX, opacità e posizione percentuale di ogni punto.
- Per un gradiente lineare imposta l'angolo; per uno radiale imposta il centro X e Y.
- Genera, confronta l'anteprima con il valore CSS e copialo.
Sintassi lineare e radiale
Un gradiente lineare segue una linea retta. In CSS, 0deg punta verso l'alto e gli angoli positivi girano in senso orario. Questo generatore scrive linear-gradient(angle, stops). Un gradiente radiale si espande da un punto e scrive radial-gradient(circle at X% Y%, stops). Entrambe le funzioni sono valori immagine CSS validi per proprietà come background-image.
Punti colore, opacità e posizioni uguali
Ogni punto combina un colore e una posizione lungo la linea del gradiente. Qui le posizioni sono limitate a 0–100% per un editor prevedibile, anche se CSS ammette valori esterni. I punti vanno inseriti in ordine crescente. Due colori adiacenti possono avere la stessa posizione; CSS crea allora una transizione netta anziché una sfumatura graduale. L'opacità viene emessa come rgba() solo quando è inferiore a 1.
Perché modificare i dati cancella l'anteprima
Il campione visibile è una rappresentazione confermata del risultato mostrato. Modificare un controllo invalida subito risultato precedente, stato di copia e anteprima. Genera di nuovo il CSS per applicare le impostazioni attuali. Così non compare vecchio CSS accanto a nuovi dati e la dichiarazione copiata corrisponde al rendering confermato del browser.
Ambito e controlli nel browser
- Da due a quattro punti ordinati; sono supportate posizioni duplicate.
- Una forma radiale circolare con centro percentuale.
- Un angolo lineare da 0 a 360 gradi.
- Nessun gradiente ripetuto, maniglia di trascinamento, preimpostazione, suggerimento di palette, animazione, esportazione immagine o prefisso del browser.
- Controlla separatamente il contrasto del testo quando il gradiente è dietro al contenuto; l'anteprima visiva non è una verifica di accessibilità.
Esempi
linear-gradient(90deg, #FF0000 0%, rgba(0, 0, 255, 0.5) 100%) si sviluppa orizzontalmente con un'estremità blu semitrasparente.
radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%) colloca il centro verso l'area in basso a sinistra.
Domande frequenti
Due punti possono condividere una posizione?
Sì. Posizioni adiacenti uguali vengono mantenute e creano un bordo di colore netto.
Perché le posizioni devono essere crescenti?
Rende esplicito l'ordine dei punti inseriti ed evita correzioni inattese quando si copia.
L'opacità rende trasparente l'intero elemento?
No. Cambia il colore di quel punto; l'aspetto finale dipende anche da ciò che sta dietro al gradiente.
Perché non ci sono prefissi dei produttori nel risultato?
La pagina emette la sintassi standard attuale senza prefissi per browser moderni.