Tutti gli strumenti per i colori

Crei motivi SVG per sfondi senza giunture da quasi 2000 disegni: cambi colori, zoom, spaziatura e angolo, poi copi il CSS o scarichi SVG, PNG o WebP.

Gratuito

1Scegliere un motivo

Il Suo titolo qui

Veda come appare il motivo dietro contenuti reali.

Inizia ora
Motivo

Sfoglia per collezione


Informazioni su Generatore di motivi

Il generatore di motivi trasforma quasi 2000 disegni già pronti in sfondi che può regolare e usare subito. Sfogli 14 collezioni, dalle onde, i pois e le tassellazioni ai tartan, al seigaiha giapponese, alle stelle islamiche, ai ventagli Art déco, agli sprite pixel e ai mimetici, e veda ciascuno nei Suoi colori.

Ogni disegno è realizzato come grafica vettoriale e si ripete senza giunture visibili, con qualsiasi zoom e a qualsiasi angolo. Cambi fino a sei colori, lo zoom, la posizione, la spaziatura, lo spessore del tratto e l'angolo, trasformi le forme piene in contorni oppure lasci muovere il motivo con un'animazione ciclica. I motivi generativi, come le mappe topografiche, le celle di Voronoi e i tasselli di Truchet, possono produrre una nuova variante a ogni clic.

Quando il risultato è giusto, lo copi come CSS, SCSS, configurazione Tailwind, SVG inline, URI dei dati o componente React, oppure scarichi un SVG, PNG, JPG o WebP di qualsiasi dimensione fino a 8000 pixel, compreso un singolo tassello per la Sua ripetizione. Tutto avviene nel browser: non viene caricato nulla e non serve alcun account.

Come usare Generatore di motivi

  1. Scelga un motivo: cerchi per nome oppure filtri per collezione e numero di colori.
  2. Scelga i colori con i selettori, con una palette già pronta o con «Nuova palette».
  3. Regoli zoom, posizione, spaziatura, tratto e angolo. Blocchi i valori che preferisce prima di premere «Ispirazione».
  4. Lo verifichi con le anteprime «Mostra il tassello», «In una pagina» e «Nel testo».
  5. Copi il codice o scarichi il file, e usi «Copia link» per tornare più tardi a questo stesso motivo.

Domande frequenti

Sì. Lo strumento è gratuito, senza registrazione e senza limiti: ogni motivo viene disegnato nel browser, quindi nessun file viene inviato a un server.

Sì. Può usare i motivi esportati in lavori personali e commerciali, come siti web, app, confezioni e stampa, senza obbligo di attribuzione.

No. Ogni forma che attraversa il bordo di un tassello viene ridisegnata sul lato opposto, quindi la ripetizione è senza giunture. Usi l'anteprima «Mostra il tassello» per vedere esattamente dove inizia e finisce un tassello.

Il CSS è il più semplice: incolli la regola nel Suo foglio di stile e la applichi a qualsiasi elemento. A 0, 90, 180 o 270 gradi usa un piccolo tassello con background-size; con altri angoli usa un SVG che riempie l'elemento. Le versioni Tailwind, SCSS, React e URI dei dati contengono lo stesso motivo.

L'animazione è integrata nell'SVG, quindi non richiede script e funziona anche come sfondo CSS nei browser moderni. La verifichi nei browser che supporta. I file PNG, JPG e WebP restano immagini, quindi mantengono solo il primo fotogramma.

I disegni organici, come i mimetici e le mappe topografiche, contengono molte curve. La dimensione del codice è mostrata accanto al pulsante di copia. Se è troppo pesante per una pagina, scelga un disegno con un tassello più piccolo oppure usi un tassello PNG.

Sì, su quasi ogni motivo: attivi «Sfondo trasparente» ed esporti come CSS, SVG, PNG o WebP. Alcuni disegni con sovrapposizioni nascondono forme con il colore di sfondo, quindi richiedono uno sfondo pieno. I file JPG non supportano la trasparenza.


Ricerche popolari
generatore di pattern svg generatore di pattern seamless pattern sfondo css creare pattern ripetuti sfondi con pattern gratis generatore di motivi geometrici pattern sfondo tailwind tassello png senza giunture
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.