Vai al contenuto principale
LibraTool logoLibraTool

Generatore Gradienti CSS gratis

Crea gradienti CSS lineari, radiali e conici con anteprima live. Copia il CSS con un clic.

Funziona offline una volta caricato
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Evita i punti intermedi grigi tra colori molto diversi. Aggiunge una riga sRGB semplice come alternativa per i browser meno recenti.

0%
100%

Preset

Usi comuni

  • Crea Gradienti per Sezioni HeroProgetta sfondi sfumati a pagina intera per sezioni hero e pagine di destinazione dei siti web.
  • Crea Pulsanti e CTA SfumatiProgetta sfondi pulsanti sfumati accattivanti per chiamate all'azione che spiccano.
  • Crea Sfondi Sfumati per SchedeProgetta riempimenti sfumati per schede, modal, barre laterali e sfondi dei componenti UI.
  • Crea Gradienti per Grafiche Social MediaProgetta sfondi sfumati vivaci per post Instagram, miniature YouTube e schede Twitter.
  • Crea Scale di Colore per GraficiGenera scale di colore sfumate per mappe di calore, barre di avanzamento e visualizzazioni dati.

Come funziona

Il generatore di gradienti costruisce stringhe di gradiente CSS direttamente nel browser — nessuna libreria, nessun server, nessun caricamento. Una funzione scritta a mano assembla la sintassi corretta di linear-gradient, radial-gradient, o conic-gradient dai tuoi punti colore e angolo in tempo reale, poi formatta il risultato per qualsiasi target di output scegli.

  1. 1
    Configura punti e direzione
    Imposti tra 2 e 6 punti colore usando il selettore colore nativo del browser, poi posizioni ogni punto lungo l'asse 0-100% con uno slider range. Per i gradienti lineari e conici scegli anche un angolo (0-360°); per i gradienti radiali scegli la forma (ellisse o cerchio) e la parola chiave di dimensione che controlla quanto lontano si estende il gradiente.
  2. 2
    buildCss assembla la stringa del gradiente
    A ogni modifica, una funzione locale buildCss concatena i tuoi parametri nella chiamata di funzione CSS corretta — ad es. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Nessuna libreria è coinvolta; la stringa viene costruita con logica di template JavaScript semplice e unita direttamente dall'array dei punti.
  3. 3
    L'anteprima dal vivo si rende tramite stile inline
    La stringa di gradiente assemblata viene applicata direttamente a un elemento div come stile di sfondo inline, così il motore CSS del browser stesso rende l'anteprima. Non c'è canvas o immagine coinvolto — ciò che vedi è letteralmente la proprietà CSS applicata.
  4. 4
    Output pronto da copiare in quattro formati
    Un selettore di formato trasforma la stessa stringa di gradiente in CSS semplice (background: ...), un blocco CSS con fallback solido, una classe Tailwind di valore arbitrario, o una dichiarazione di variabile SCSS. Cliccando Copia si scrive l'output selezionato negli appunti tramite navigator.clipboard.writeText. Il gradiente corrente viene anche codificato nell'hash URL così puoi salvarlo nei preferiti o condividerlo.

Strumenti correlati

🟦

Generatore CSS Grid

Progetta visivamente una griglia CSS — tracce, unità e spazi — e copia il CSS e HTML generati.

Prova
↔️

Generatore CSS Flexbox

Sperimenta con direzione flex, wrap, justify e align su elementi dal vivo — e copia il CSS.

Prova
🧮

Calcolatore di Matrici

Somma, sottrai, moltiplica, trasponi, inverti e riduci matrici, più determinante, rango, autovalori e risoluzione di Ax = b — fino a 8×8, con copia in un tocco. Gratis e privato.

Prova

Domande frequenti