Pattern di sfondo in CSS
Scegli il pattern e regola i due colori, la dimensione e lo spessore. Lo sfondo è fatto con i gradienti CSS: non pesa nulla e resta nitido su qualsiasi schermo.
Come si usaSfondi con pattern, solo con il CSS
Disponibile in: 
Pattern di sfondo in CSS: a cosa serve
Scegli tra otto pattern fatti solo con i gradienti CSS (pois, griglia di punti, quadretti, righe, strisce, diagonali, scacchi e zigzag) e regola i due colori, la dimensione e lo spessore. La miniatura di ogni pattern mostra già i tuoi colori.
Il codice non usa nessuna immagine: è leggero e resta nitido a qualsiasi risoluzione.
Come si usa
- Scegli il pattern.
- Regola colori, dimensione e spessore.
- Copia il CSS e applica la classe fundo.
Quando usarlo
- Sfondi discreti per le sezioni dei siti.
- Intestazioni e banner con texture.
- Sfondi per presentazioni e mockup.
Domande frequenti
Perché fare il pattern in CSS?
Perché non serve scaricare immagini: il browser disegna il pattern con i gradienti. Il codice ha poche righe, non perde qualità sugli schermi ad alta risoluzione e cambia colore semplicemente modificando i valori.
Come rendere il pattern discreto?
Usa due colori molto vicini (ad esempio sfondo #ffffff e pattern #eef2f7) oppure rendi il colore del pattern trasparente. I pattern forti dietro ai testi ne ostacolano la lettura.
Funziona in tutti i browser?
Sì. I pattern usano linear-gradient, radial-gradient e repeating-linear-gradient, supportati da tutti i browser attuali.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.