Generatore gradiente CSS
Crea gradienti CSS con anteprima in tempo reale.
Presets:
background: linear-gradient(135deg, #D94F30, #0D7C66);Cos'è un gradiente CSS?
Un gradiente CSS è una transizione morbida tra due o più colori che viene applicata come sfondo agli elementi HTML. È una delle proprietà più versatili del web design moderno, che permette di creare sfondi attraenti e professionali senza bisogno di immagini. I gradienti riducono il peso della pagina eliminando la dipendenza da file grafici, migliorano i tempi di caricamento e si adattano perfettamente a qualsiasi risoluzione dello schermo, inclusi schermi Retina e ad alta densità di pixel.
Esistono due tipi principali di gradienti CSS: lineari e radiali. I gradienti lineari creano una transizione di colore lungo una linea retta, definita da un angolo (ad esempio, dall'alto verso il basso, in diagonale o in qualsiasi direzione personalizzata). I gradienti radiali, invece, si irradiano da un punto centrale verso l'esterno in forma circolare o ellittica, creando effetti di illuminazione e profondità molto utilizzati nelle interfacce moderne.
I gradienti CSS sono compatibili con tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e Opera. Il nostro generatore di gradienti ti permette di sperimentare con colori, angoli e tipi in tempo reale, generando automaticamente il codice CSS pronto per copiare e incollare nel tuo progetto web.
Domande frequenti
Funziona in tutti i browser?
Sì. I gradienti CSS sono compatibili con tutti i browser moderni senza necessità di prefissi vendor. Chrome, Firefox, Safari, Edge e Opera li supportano nativamente. Solo browser molto datati come Internet Explorer 9 o inferiori non li supportano.
Posso usare più di 2 colori?
Sì, il CSS permette gradienti con più punti di colore. Anche se il nostro generatore lavora con 2 colori per semplificare l'interfaccia, puoi modificare manualmente il codice risultante per aggiungere più colori separandoli con virgole nella dichiarazione del gradiente.
Come uso il codice generato?
Semplicemente copia il codice CSS cliccando sul pulsante "Copia" e incollalo nella proprietà di stile dell'elemento HTML desiderato. Puoi usarlo in un foglio di stile CSS, in un attributo style inline, o in framework come Tailwind CSS o styled-components.
Vuoi saperne di più? Leggi la nostra guida completa →