Gradiente da una foto
Costruisci un gradiente mesh morbido da più colori o prendi la palette dalla tua foto. Sposta i punti di colore direttamente sulla tela, aggiungi distorsione e grana, scarica l'immagine o copia il CSS.
Il browser non supporta WebGL, lo strumento non può partire. Prova un altro browser o attiva l'accelerazione hardware.
Passa il mouse sulla tela per vedere i punti di colore: trascinali, con un doppio clic aggiungi un colore. Trascina una foto sulla tela o incollala dagli appunti.Trascina i punti di colore con il dito; tocca due volte per aggiungere un colore.
I colori seguono l'ordine dell'elenco. Per invertirlo usa il pulsante "Ordine inverso".
CSS
Esatto per lineare, radiale e conico. Per mesh e mosaico è uno sfondo simile fatto di macchie radiali, senza distorsione e grana.
Il tuo gradiente in un minuto
- 1Scegli i coloridalla palette, a caso o dalla tua foto
- 2Sposta i puntie regola distorsione e grana
- 3ScaricaPNG, JPG, WebP, SVG o copia il CSS
Cosa sono questi gradienti
Un gradiente mesh è fatto di più punti di colore: ciascuno colora l'area intorno a sé e tra loro i colori si fondono dolcemente. Sfondi così stanno dietro copertine, banner, storie e schermate di app. Il cursore "Morbidezza" decide quanto si mescolano i colori, e "Mosaico" divide la tela in zone secondo il punto più vicino. Lineare, radiale e conico sono gradienti classici che passano in CSS con esattezza.
Palette da una foto
Carica una foto: lo strumento vi trova fino a sette colori principali e mette i punti dove quei colori vivono nell'immagine. Così il gradiente riprende l'atmosfera della foto: un tramonto, il mare, un interno, la confezione di un prodotto. La foto resta nel browser e non viene inviata da nessuna parte.
Distorsione e grana
La distorsione sposta i colori seguendo un motivo: onde, rumore morbido, celle o un vortice intorno al centro. "Forza" decide quanto, "Scala del motivo" quanto è grosso, e il pulsante con il dado dà un altro motivo casuale. La grana aggiunge una leggera texture da pellicola: il gradiente non sembra plastica e non crea bande. In "Regola tutti i colori" puoi cambiare in un colpo tonalità, saturazione e luminosità di tutta la palette.
Prova anche
Anche loro gratis e senza registrazione
Domande frequenti
Non hai trovato la risposta? Scrivici e ti aiutiamo.
In quella indicata nei campi W e H, fino a 4096 pixel sul lato lungo (limite della scheda video nel browser). Ci sono dimensioni pronte per post, storia, intestazione X, anteprima link e sfondo. Sullo schermo compare una copia ridotta con le stesse proporzioni.
PNG è senza perdita, meglio per il design. JPG e WebP pesano meno, vanno bene per social e siti. L'SVG di un gradiente lineare o radiale senza distorsione e grana è un vero file vettoriale modificabile in Figma; per gradienti mesh e distorsioni l'SVG contiene un'immagine, perché non esiste un formato vettoriale per questi gradienti.
Per lineare, radiale e conico sì. Il gradiente mesh in CSS è composto da più macchie radiali e somiglia all'immagine, ma senza distorsione e grana: i browser non sanno disegnarle con il CSS normale. Se ti serve proprio quello sfondo, usa il PNG.
La foto viene ridotta e tutti i pixel vengono raggruppati per somiglianza di colore (metodo k-means). I centri dei gruppi diventano i colori della palette e il punto di ogni colore viene messo dove quel colore compare di più nell'immagine. I colori troppo rari vengono scartati.
Sì. Clicca il quadratino del colore per aprire il selettore o scrivi un codice HEX nel campo accanto. I colori possono essere da 2 a 12. La croce elimina un colore, il più ne aggiunge uno nuovo e un doppio clic sulla tela mette un nuovo punto proprio lì.
Premi "Link al gradiente": il link viene copiato e apre lo stesso gradiente con tutti i colori, i punti e le impostazioni. Inoltre l'ultimo gradiente resta salvato nel browser e si apre alla visita successiva. Hai sbagliato? Annulla il passo con il pulsante freccia o con Ctrl+Z.
Sullo schermo viene disegnata una copia ridotta, il file è a dimensione piena, quindi grana e dettagli fini della distorsione nel file sono più piccoli. Colori e posizione dei punti coincidono.
Sì, senza limiti: è la tua immagine. La foto da cui è presa la palette non esce dal browser e una palette di colori non è protetta dal diritto d'autore.