Generatore di Gradiente CSS
Cos'è Generatore di Gradiente CSS
Un generatore di gradiente CSS ti permette di creare un gradiente lineare o radiale visivamente e copiare il CSS esatto. Scegli il tipo di gradiente, imposta l'angolo (lineare) o la forma e la posizione (radiale), aggiungi tutti i punti colore che ti servono e trascina ognuno nella posizione giusta. L'anteprima si aggiorna all'istante e il riquadro di output mostra sempre una dichiarazione background pronta da incollare.
Come usare
- Scegli Lineare o Radiale come tipo di gradiente.
- Regola il cursore dell'angolo per i gradienti lineari, oppure scegli forma e posizione per quelli radiali.
- Imposta colore e posizione di ogni punto, e aggiungine altri con il pulsante Aggiungi punto colore.
- Copia il CSS generato dal riquadro di output e incollalo nel tuo foglio di stile.
Quando usarlo
Stai costruendo una sezione hero e ti serve uno sfondo che sfumi dolcemente dal blu al rosa? Imposta due punti a 0% e 100%, scegli un angolo e copia background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); direttamente nel tuo CSS. Altrettanto utile per overlay di card, stati hover dei pulsanti o un bagliore radiale dietro un logo, senza regolare a mano la sintassi del gradiente nei devtools.
Domande frequenti
Qual è la differenza tra gradiente lineare e radiale?
Un gradiente lineare fa transitare i colori lungo una linea retta a un angolo fisso, come un tramonto che passa dall'arancione al viola. Un gradiente radiale fa transitare i colori verso l'esterno da un punto centrale in cerchio o ellisse, come un faro o un effetto bagliore.
Quanti punti colore posso aggiungere?
Quanti vuoi. Ogni gradiente richiede almeno due punti per essere renderizzato, e puoi aggiungerne altri con il pulsante Aggiungi punto colore per creare transizioni multicolore come arcobaleni o palette di brand.
Cosa significa la percentuale di posizione su ogni punto?
La posizione indica dove quel colore raggiunge la massima intensità lungo il gradiente, da 0% (l'inizio) a 100% (la fine). Spostare la posizione di un punto cambia dove domina il suo colore e come si fonde con quelli vicini.
Il CSS generato funziona in tutti i browser?
Sì. linear-gradient() e radial-gradient() sono funzioni CSS standard supportate da tutti i browser moderni, senza bisogno di prefissi.
Posso condividere questo strumento con il mio gradiente precompilato?
Sì. L'URL si aggiorna automaticamente mentre costruisci il gradiente. Copialo dalla barra degli indirizzi o usa il pulsante Condividi, e chiunque lo apra vedrà esattamente lo stesso gradiente.
Strumenti correlati
Calcolatore di Rapporto d'Aspetto
Calcola il rapporto d'aspetto, trova la larghezza o l'altezza mancante e ridimensiona immagini e video mantenendo le proporzioni. Gratis.
Generatore di Codice a Barre
Genera codici a barre EAN-13 o Code 128 online. Inserisci il numero o testo e scarica come SVG o PNG. Gratuito, senza registrazione.
Decodificatore Base64
Decodifica stringhe Base64 in testo semplice istantaneamente. Supporta output Unicode completo con emoji. Decodificatore Base64 gratuito.