CSS Pattern Generator
Genera pattern CSS per sfondi all'istante. Scegli puntini, linee, griglia, scacchiera o diagonale — copia il CSS e usalo ovunque.
① Scegli un tipo di pattern ② Regola dimensione e colori ③ Copia il CSS generato
Colore pattern
#C9B89A
Colore sfondo
#0E0E0E
Come funziona
Ogni pattern è costruito con gradienti CSS puri — niente immagini, niente SVG. I punti usano radial-gradient, linee e diagonale usano repeating-linear-gradient, la griglia usa due linear-gradient incrociati, la scacchiera usa conic-gradient.
Controllo dimensione
Lo slider Dimensione imposta il tile background-size. Tile più grandi creano un pattern più rado; tile più piccoli creano una texture più densa.
Solo CSS
Il CSS generato usa solo background-image e background-size, rendendolo compatibile con qualsiasi elemento HTML e tutti i browser moderni.
background-color: #0e0e0e;
background-image: radial-gradient(circle, #c9b89a 5px, transparent 5px);
background-size: 20px 20px;
Cos'è un pattern CSS per sfondi?
I pattern CSS per sfondi sono texture visive ripetitive create interamente con gradienti CSS — nessuna immagine richiesta. Usando radial-gradient, linear-gradient e conic-gradient, puoi produrre punti, linee, griglie, scacchiere e strisce diagonali che si ripetono senza interruzioni. Questa tecnica è supportata in tutti i browser moderni e non genera richieste HTTP aggiuntive, rendendola ideale per sfondi UI performanti, sezioni hero, card e texture a pagina intera.
Domande frequenti
Un pattern CSS per sfondi è una texture visiva ripetitiva generata interamente con funzioni gradiente CSS — niente immagini o SVG. Combinando radial-gradient, linear-gradient, repeating-linear-gradient e conic-gradient con background-size, si creano puntini, linee, griglie, scacchiere e strisce diagonali senza interruzioni.
Il pattern a punti usa radial-gradient per disegnare un piccolo cerchio pieno al centro di ogni tile, con riempimento trasparente per il resto. Impostando background-size alle dimensioni del tile, i punti si ripetono in una griglia regolare.
Il pattern linee usa un singolo repeating-linear-gradient in una direzione, creando linee orizzontali parallele. Il pattern griglia usa due linear-gradient perpendicolari sovrapposti, creando una griglia incrociata con linee in entrambe le direzioni.
La funzione conic-gradient crea una rotazione a quattro quadranti dove i quadranti alternati sono riempiti con il colore del pattern o dello sfondo. Impostando background-size al doppio della dimensione del tile, i quattro quadranti formano una scacchiera perfetta.
Tutti e cinque i pattern usano funzioni gradiente supportate in tutti i browser moderni. Il conic-gradient usato per la scacchiera richiede Chrome 69+, Firefox 83+ e Safari 12.1+. Tutti gli altri pattern funzionano in browser dal 2015 in poi.
Copia il CSS generato e applicalo a qualsiasi elemento HTML. Puoi aggiungerlo inline via attributo style o in una classe CSS. Per uno sfondo a pagina intera, applicalo a body o un div fisso. Combina con background-attachment: fixed per un effetto parallasse.
Il tool supporta 5 tipi di pattern: punti, linee, griglia, scacchiera e diagonale. Ognuno è configurabile con una dimensione tile arbitraria (4–40px) e colori completamente personalizzati, producendo migliaia di combinazioni visive.