Cosa fa Pattern Generator.
Pattern Generator crea sfondi geometrici a piastrelle da SVG inline. Scegli un pattern — punti, strisce, griglie, chevron e altro — poi imposta colori di primo piano e di sfondo, scala del tile e opacità.
L'anteprima si aggiorna in tempo reale mentre regoli i controlli. Quando il risultato ti convince, esporta nel formato che serve al tuo flusso di lavoro: un frammento CSS di background, un tile SVG autonomo o un PNG 1600×900.
Scegli, personalizza ed esporta in quattro passaggi.
- Apri Pattern Generator e fai clic su un tile pattern nel selettore.
- Regola colori di primo piano e di sfondo, scala e opacità finché l'anteprima corrisponde al tuo brand o layout.
- Fai clic su Copia CSS per ottenere una proprietà di sfondo pronta da incollare, oppure usa Scarica SVG / Scarica PNG per i file asset.
- Inserisci l'output nel foglio di stile della pagina, nel file Figma o nel deck di slide — nessun account e nessun caricamento.
Incolla CSS in una pagina.
Il CSS copiato è una singola dichiarazione background con una data URI SVG inline. Incollala in una regola di classe o in uno stile inline sull'elemento che deve mostrare il pattern:
Esempio: aggiungi la riga copiata a .hero { … } o a una classe utility nel tuo foglio di stile. L'SVG si ripete senza soluzione di continuità, quindi funziona su sezioni a larghezza piena, card e blocchi hero senza markup aggiuntivo.
Poiché il pattern è incorporato come data URI, non c'è un file immagine separato da ospitare. I deploy restano semplici — un incolla CSS e hai finito.
Usa il tile SVG come riempimento Figma.
Scarica il tile SVG e trascinalo nel tuo file Figma, oppure usa Inserisci immagine per importarlo. Seleziona un frame o una forma, poi imposta il tipo di riempimento su Immagine e scegli l'SVG importato.
Imposta la modalità di riempimento su Piastrella così la ripetizione geometrica corrisponde all'anteprima dello strumento. Regola la scala in Figma se ti serve una ripetizione più fitta o più larga rispetto alla dimensione predefinita del tile.
Questo percorso è utile quando vuoi lo stesso pattern in un mockup e nel CSS di produzione — esporta una volta da Pattern Generator, usa SVG in Figma e CSS sulla pagina live.
PNG per slide e immagini OG.
Scarica PNG esporta un raster 1600×900 del pattern corrente con le tue impostazioni di colore e scala. Usalo come sfondo slide in Keynote, Google Slides o PowerPoint, o come immagine di anteprima social quando ti serve un asset piatto invece del CSS live.
Il PNG è utile anche per strumenti che non supportano riempimenti SVG o sfondi con data URI — template email, export PDF e generatori di miniature spesso richiedono un singolo file immagine.
Solo in locale nel browser.
Pattern Generator funziona interamente nel tuo browser. Colori, scala ed export vengono calcolati sul tuo dispositivo — nulla viene caricato su Tiny Design Shop o su un server di terze parti. Chiudi la scheda e la tua sessione scompare.