Generatore gradiente da immagine

Tutti gli strumenti

Estrai un gradiente bellissimo da qualsiasi foto — carica un'immagine, scegli un mood e i colori dominanti diventano stop di gradiente trascinabili. Copia il CSS pronto all'uso all'istante.

Trascina un'immagine qui

o clicca per sfogliare — puoi anche incollare dagli appunti

Tutto gira nel tuo browser — la tua immagine non viene mai caricata, nessuna registrazione, completamente gratuito.

Immagine sorgente
Leggendo i colori…
Immagine sorgente
Mood
Colori estratti
Questi sono i colori dominanti estratti dalla tua immagine. Clicca su un campione per copiarlo, o trascina gli stop qui sotto per affinare il gradiente.
Anteprima gradiente
Tipo di gradiente
Angolo
°
Stop colore
Trascina un cursore per riposizionare uno stop, o clicca sulla barra per aggiungerne uno. Seleziona uno stop per modificarne il colore.
Stop selezionato
%
CSS
background: —;

Informazioni su Generatore gradiente da immagine

Il Generatore di Gradiente da Immagine trasforma qualsiasi foto in un gradiente CSS pronto all'uso. Trascina, sfoglia o incolla un'immagine e lo strumento la legge su un canvas, ne estrae i colori dominanti e li dispone come stop del gradiente che puoi trascinare, ricolorare e riordinare finché la sfumatura non corrisponde all'atmosfera dell'originale.

Un selettore di umore — Colorata, Brillante, Attenuata, Profonda o Scura — cambia quali colori estratti diventano stop, così una singola foto può generare diversi gradienti molto diversi tra loro. Puoi controllare il tipo di gradiente (lineare, radiale o conico), l'angolo, e gli stop stessi: clicca sulla barra per aggiungerne uno, trascina per riposizionarlo, inverti o ruota con un clic.

L'intero processo avviene nel tuo browser; la tua immagine non viene mai caricata su un server. Quando l'anteprima ti convince, copia la regola CSS completa, solo il valore di sfondo, oppure i colori estratti da soli: ideale per sezioni hero, sfondi di pagina e visual di brand derivati dalla fotografia.

Come usare Generatore gradiente da immagine

  1. Trascina un'immagine, clicca per sfogliare, oppure incollane una dagli appunti.
  2. Scegli un umore — Colorata, Brillante, Attenuata, Profonda o Scura — per decidere quali colori estratti diventano stop.
  3. Seleziona il tipo di gradiente (lineare, radiale o conico) e regola l'angolo.
  4. Trascina gli stop di colore per affinare la sfumatura; aggiungi, rimuovi, inverti o rimescola gli stop secondo necessità.
  5. Clicca su "Copia CSS" per prendere il codice del gradiente pronto da incollare.

Domande frequenti

No. L'immagine viene letta direttamente in un canvas nel tuo browser, e l'estrazione dei colori e la matematica del gradiente avvengono tutte localmente. Nulla lascia il tuo dispositivo in nessun momento.

Sì, interamente. Poiché tutto gira lato client non ci sono crediti, account o limiti: estrai gradienti da tutte le immagini che vuoi.

Questo strumento parte da una foto: estrae i colori dominanti dell'immagine e costruisce il gradiente a partire da essi. Il Generatore di Gradienti normale parte da zero con colori scelti da te. Entrambi producono lo stesso tipo di CSS modificabile e pronto da copiare.

Gli umori ri-classificano i colori estratti dalla tua immagine: Colorata privilegia tonalità vivaci e varie, Brillante sceglie toni chiari e saturi, Attenuata seleziona quelli più soft e desaturati, mentre Profonda e Scura estraggono colori più ricchi e scuri. Cambiare umore ricostruisce istantaneamente gli stop del gradiente.

Sì. Ogni stop è trascinabile, puoi cliccare sulla barra per aggiungere stop o rimuovere quelli selezionati, cambiare il colore di ogni stop, passare tra lineare, radiale e conico, ruotare l'angolo a passi di 45°, invertire la direzione o rimescolare nuovi colori dall'immagine.
Condividi
Strumenti correlati
Generatore gradienti Crea gradienti CSS lineari, radiali e conici da zero con controllo multi-stop trascinabile e preset curati. Copia il CSS pronto all'uso all'istante. Gratuito
Estrattore colori da immagine Estrai una palette raffinata e pronta da copiare da qualsiasi immagine. Gratuito
Generatore di palette colori Crea palette cromatiche armoniose da una ruota dei colori interattiva — applica regole di armonia come analogica, complementare o triade, poi copia qualsiasi valore all'istante. Gratuito
Abbinatore di Colori Pantone Cerca qualsiasi codice Pantone solid-coated per leggerne i valori HEX, RGB e CMYK, oppure inserisci un colore HEX/RGB e trova istantaneamente la corrispondenza Pantone più vicina — tutto nel tuo browser. Gratuito
Abbinamento font e directory Google Fonts Sfoglia una directory curata dei Google Fonts più popolari con anteprime live, filtra per categoria e cerca per nome, poi copia il CSS pronto da incollare ed esplora gli abbinamenti di font suggeriti — tutto nel tuo browser. Gratuito
Esportatore palette Incolla o importa un insieme di colori ed esportali immediatamente come variabili CSS, SCSS, configurazione Tailwind, JSON o campioni SVG — il passaggio finale per qualsiasi palette. Gratuito
Ricerche popolari
gradiente da immagine estrai gradiente da foto immagine a gradiente css generatore gradiente foto crea gradiente da foto gradiente css da immagine
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.
Segnala un problema

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.