Generatore di motivi di sfondo CSS

Questo strumento genera motivi di sfondo ripetuti usando solo gradienti CSS, senza bisogno di file immagine. Scegli tra pois, righe diagonali, scacchiera o linee della griglia, regola colori e spaziatura, quindi copia il codice CSS di background-image direttamente nel tuo foglio di stile.

Che cos'è questo strumento?

Il CSS può disegnare motivi ripetuti senza alcun file immagine usando i gradienti — radial-gradient() e linear-gradient() — come background-image, combinati con un background-size più piccolo dell'elemento in modo che il gradiente venga affiancato e ripetuto a mosaico. I pois usano un repeating radial-gradient, le righe e la scacchiera usano linear-gradient() ripetuto o sovrapposto a più livelli, mentre le linee della griglia usano due linee linear-gradient() sovrapposte.

Questo strumento crea queste dichiarazioni di gradiente al posto tuo. Scegli un tipo di motivo, regola il colore del motivo, il colore di sfondo e la spaziatura, e osserva l'anteprima in tempo reale aggiornarsi — poi copia il codice CSS esatto di background-image e background-size.

Fonte: CSS Images Module Level 3, W3C — definisce repeating-linear-gradient() e repeating-radial-gradient(), le funzioni su cui si basano questi motivi.

Perché usarlo?

Nessun file immagine, nessuna richiesta HTTP: il motivo è puro CSS e si rende istantaneamente a qualsiasi risoluzione, compresi gli schermi retina/ad alta densità di pixel.
Colore e spaziatura completamente regolabili senza dover scrivere a mano la sintassi dei gradienti o calcolare la matematica dell'affiancamento a mosaico.
L'anteprima in tempo reale mostra il motivo ripetuto esatto prima ancora di copiare qualcosa.
Si adatta perfettamente a qualsiasi scala, essendo matematica vettoriale e non un'immagine raster: nessuna sfocatura quando l'elemento viene ridimensionato.
Funziona interamente nel browser: nessuna delle impostazioni configurate viene caricata da nessuna parte.
Gratuito, senza registrazione, funziona su dispositivi mobili.

Come si usa

Scegli un tipo di motivo: pois, righe diagonali, scacchiera o linee della griglia.
Scegli il colore del motivo e il colore di sfondo che appare tra le forme del motivo o dietro di esse.
Regola il cursore della dimensione per rendere i pois, le righe o le celle della griglia più grandi o più piccoli: questo controlla anche quanto densamente si ripete il motivo.
Copia il codice CSS generato e incollalo come background-image (e background-size/background-position, dove indicati) di qualsiasi elemento.

Esempio

Input

Motivo: pois · Colore: blu · Sfondo: bianco · Dimensione: 24px

Risultato

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Un classico motivo a pois chiari, spesso usato come sfondo discreto di una sezione o come texture per una scheda.

Come è costruito ciascun motivo

Pois: un radial-gradient() disegna un piccolo cerchio pieno, poi il background-size lo ripete come una griglia affiancata a mosaico di puntini.
Righe diagonali: un repeating-linear-gradient() a 45 gradi alterna il colore del motivo e il colore di sfondo a intervalli fissi.
Scacchiera: due livelli sovrapposti di linear-gradient() a 45 gradi, sfalsati tra loro di mezza tessera, producono quadrati chiari/scuri alternati.
Linee della griglia: due sottili linee linear-gradient() — una orizzontale e una verticale — affiancate a mosaico con la spaziatura scelta, per formare una griglia simile alla carta millimetrata.

Quando usare i motivi CSS al posto dei file immagine

Un motivo a gradiente CSS non ha alcun peso in termini di file né richiede una richiesta HTTP, quindi si carica istantaneamente e non appare mai sfocato su schermi ad alta densità di pixel, a differenza di una tessera di sfondo PNG raster. È ideale per texture discrete dietro il testo, divisori di sezione, illustrazioni per stati vuoti o schede segnaposto. Per motivi illustrati o fotografici complessi, un'immagine vera resta comunque lo strumento più adatto: i gradienti CSS sono più indicati per forme semplici, geometriche e ripetitive come quelle qui presentate.

Abbinamento con altri effetti CSS

I motivi funzionano bene come sfondo dietro le schede in stile glassmorphism, poiché la sfocatura ha bisogno di qualcosa con una texture visiva dietro di sé per essere visibile. Si abbinano anche naturalmente ad angoli arrotondati sull'elemento contenitore.

→ Generatore di glassmorphism CSS · Generatore di raggio di bordo

Domande frequenti

Questi motivi richiedono file immagine?

No. Ogni motivo qui presente è generato esclusivamente con gradienti CSS come background-image: non è coinvolto alcun file PNG, SVG o di altro tipo, quindi non c'è alcuna richiesta HTTP aggiuntiva né alcun rischio di sfocatura su schermi ad alta risoluzione.

Posso cambiare la dimensione del motivo?

Sì: il cursore della dimensione controlla il background-size, che stabilisce quanto è grande una singola tessera ripetuta del motivo. Una dimensione più piccola avvicina maggiormente pois, righe o celle della griglia; una dimensione più grande le allontana.

Perché il motivo a scacchiera usa due gradienti?

Un singolo linear-gradient() può alternare i colori solo lungo una direzione. Sovrapporre due gradienti a 45 gradi, sfalsati tra loro di mezza tessera, è ciò che produce i quadrati chiari/scuri alternati di una scacchiera: è la tecnica standard per creare scacchiere solo con CSS.

Questo motivo apparirà nitido su schermi retina/ad alta densità di pixel?

Sì. Poiché il motivo è un gradiente matematico e non un'immagine bitmap, viene renderizzato alla risoluzione richiesta dallo schermo, senza alcun ingrandimento o sfocatura, a differenza di una piccola tessera di immagine raster allungata o ripetuta ad alta densità di pixel.

Posso usare questi motivi come sfondo per un'intera pagina?

Sì: applica il background-image, il background-size e il background-position generati (dove presenti) al body o a qualsiasi elemento contenitore a larghezza piena. Tieni conto del contrasto: un motivo vivace e ad alto contrasto dietro il testo del corpo può compromettere la leggibilità, quindi impostazioni più leggere e discrete solitamente funzionano meglio per grandi aree di sfondo.