Come trasformare un'immagine in sfondo CSS ripetuto con Pattern Generator

Carica texture, logo o foto ed esporta sfondo CSS a piastrelle, tile SVG o PNG — tutto nel browser. Il file resta sul dispositivo; nulla viene inviato a un server.

Trasforma la tua immagine in un tile ripetuto.

Pattern Generator può creare sfondi da 16 preset geometrici — o da un'immagine caricata. Usa un campione di texture, marchio, ritaglio foto o qualsiasi file PNG, JPEG, WebP o SVG come tile di ripetizione.

Lo strumento funziona interamente nel browser. Scegli un file, regola colore di sfondo, scala del tile e opacità, poi copia CSS o scarica SVG o PNG. Nessun account e nessun upload sul server.

Carica ed esporta in cinque passaggi.

  1. Apri Pattern Generator.
  2. Nel selettore pattern, clicca la scheda Your image — il tile di upload all'inizio della griglia.
  3. Scegli un file PNG, JPEG, WebP o SVG dal dispositivo. L'anteprima si aggiorna quando l'immagine è caricata.
  4. Regola Background colour, Scale e Opacity finché la ripetizione è corretta nell'anteprima.
  5. Clicca Copy CSS, Download SVG o Download PNG per usare il pattern nel progetto.

Cosa succede alla tua immagine.

Pattern Generator ritaglia l'immagine in un quadrato centrale — il centro del file, usando il lato più corto come dimensione di ritaglio — poi ridimensiona quel quadrato alle dimensioni del tile per la scala attuale (fino a 256 px).

Tutta l'elaborazione avviene in memoria sul dispositivo. Il file originale non viene mai caricato su Tiny Design Shop o su server di terze parti.

PNG trasparenti e colore di sfondo.

Se l'immagine ha trasparenza — PNG, WebP con alpha o SVG — Pattern Generator riempie il tile con la Background colour scelta prima di disegnare l'immagine sopra. Le aree opache restano visibili; i pixel trasparenti lasciano vedere il colore di sfondo.

Usalo per controllare il colore dello spazio tra i loghi, ammorbidire i bordi su texture ritagliate o abbinare un colore di superficie del brand quando il file sorgente non ha uno sfondo proprio.

Copia CSS, SVG o PNG.

Copy CSS fornisce un blocco pronto da incollare di background-color, background-image e background-size con il tile incorporato come data URI. Incollalo nel foglio di stile o nello stile inline dell'elemento che deve mostrare la ripetizione.

Download SVG esporta il tile come file vettoriale autonomo — utile per riempimenti Figma o consegna design. Download PNG esporta un raster 1600×900 dell'anteprima a piastrelle — meglio per slide, anteprime social o strumenti che non accettano sfondi data URI.

Le immagini personalizzate con molti dettagli producono snippet CSS più lunghi. Se lo strumento avvisa che il CSS è grande, preferisci Download PNG o ospita il tile come file immagine separato invece di un data URI inline.

Dimensione file, tile e memoria di sessione.

Gli upload sono limitati a 8 MB. Tipi accettati: PNG, JPEG, WebP e SVG. Il tile è limitato a 256 px sul lato più lungo alla scala massima — sufficiente per ripetizioni CSS nitide senza gonfiare il foglio di stile.

L'immagine personalizzata vive solo in questa scheda del browser. Aggiorna la pagina o chiudi la scheda e l'upload viene cancellato — dovrai scegliere di nuovo il file. Nessun salvataggio cloud né sincronizzazione tra dispositivi.

Il file non lascia il dispositivo.

Pattern Generator elabora gli upload localmente nel browser. Ritaglio, ridimensionamento, anteprima ed export girano sulla tua macchina — nulla viene inviato ai server Tiny Design Shop. Chiudi la scheda al termine; nessuna copia dell'immagine viene conservata.