cosa fa
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.
flusso di lavoro
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.
css
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.
figma
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
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.
privacy
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.