Generatore di pattern di sfondo
Pois, righe diagonali, griglia, zigzag o onde: scegli due colori e la densità, guarda l'anteprima affiancata e scarica la mattonella PNG pronta da ripetere.
La mattonella scaricata è affiancabile senza giunture visibili.
Cosa rende un pattern davvero affiancabile
Un pattern "tile" è un'immagine i cui bordi combaciano: ciò che esce dal lato destro rientra identico dal sinistro, e lo stesso vale in verticale. Questo generatore disegna ogni motivo rispettando quella continuità, le righe diagonali, ad esempio, sono spaziate di esatte frazioni della mattonella, così puoi ripetere il PNG all'infinito senza giunture né scalini visibili.
Come usare il PNG scaricato
Su un sito basta una riga di CSS: background-image: url(pattern.png); background-repeat:
repeat;. La stessa mattonella funziona come riempimento in Canva, PowerPoint, Photoshop o
GIMP (con "Definisci pattern"), come sfondo per miniature YouTube e post social, o come texture
leggera per carta intestata e biglietti. Più alta è la densità, più piccola e fitta è la trama.
Perché un pattern pesa meno di una foto
Uno sfondo ripetibile può occupare pochi kilobyte e coprire uno schermo intero, perché il browser disegna cento volte la stessa piastrella. Una fotografia che copre lo stesso spazio ne pesa da cento a mille volte tanto, e va scaricata prima che la pagina si veda finita.
L'altro vantaggio è che il pattern si adatta a qualunque misura: non ha una risoluzione da rispettare, non si sgrana su uno schermo grande e non lascia bordi vuoti su uno stretto. È il motivo per cui gli sfondi ripetuti sono sopravvissuti a vent'anni di mode.
Il pattern non deve farsi notare
Uno sfondo che compete con il contenuto è uno sfondo sbagliato: il contrasto fra il disegno e la carta va tenuto bassissimo, spesso una differenza di luminosità di pochi punti. Su schermo sembra quasi invisibile, ed è esattamente il segno che è giusto.
Il rischio concreto è il testo che diventa faticoso: sotto una riga di testo qualunque motivo con dettagli piccoli crea un rumore che rallenta la lettura. Se il pattern deve stare dietro al testo, va o schiarito molto o coperto da un riquadro pieno.
Piastrelle piccole e piastrelle grandi
Una piastrella piccola si ripete tante volte e la ripetizione si vede: l'occhio trova subito la griglia, soprattutto se il motivo ha un elemento riconoscibile. Una piastrella grande nasconde meglio la ripetizione ma pesa di più e va progettata con cura ai bordi.
I motivi che reggono meglio sono quelli geometrici e regolari (righe, pois, griglie, diagonali), dove la ripetizione fa parte del disegno e non è un difetto. Un motivo figurativo, invece, tradisce la piastrella al primo sguardo, perché il cervello riconosce la stessa forma nella stessa posizione.
Strumenti vicini
Per uno sfondo sfumato invece che ripetuto c'è Generatore gradienti CSS. I colori si scelgono con Selettore di colori, e la leggibilità del testo sopra si controlla con Verifica contrasto colori.