Generatore di modelli CSS

Motivi di sfondo CSS

Un pattern di sfondo CSS è un'immagine ripetuta a piastrelle (strisce, punti, griglie, scacchiere, triangoli) disegnata interamente con funzioni gradient CSS e senza alcun file immagine. Tre proprietà fanno tutto il lavoro: background-image dipinge qualsiasi immagine gradient nell'elemento, background-size imposta la dimensione di una piastrella di quell'immagine, e background-repeat (che predefinisce a repeat) ripete quell'immagine su entrambi gli assi. background-position sposta poi la cucitura così che la piastrella di ogni livello si allinei con le altre. Un pattern è quindi semplicemente più immagini gradient impilate l'una sull'altra, ognuna dimensionata sulla stessa piastrella, ognuna posizionata per incastrarsi. I browser dipingono i valori background-image separati da virgola dal davanti al fondo, quindi la prima immagine nell'elenco si trova sopra la seconda, la seconda sopra la terza, e così via.

L'intero genere esiste grazie a un trucco sintattico: gli hard color stop. Color stop adiacenti alla stessa posizione producono una transizione istantanea invece di una sfumatura. linear-gradient(red 50%, blue 50%) non è una dissolvenza dal rosso al blu: è una linea netta. Senza hard stop ottieni una sfumatura morbida; con essi ottieni geometria. Strisce, punti, scacchi, triangoli, chevron: ogni pattern che questo strumento emette è costruito con quella singola proprietà, applicata ad angoli e dimensioni di piastrella diverse.

Breve storia: Lea Verou e la Patterns Gallery

Se una risorsa è responsabile dell'intero genere dei pattern di sfondo in puro CSS, è la CSS3 Patterns Gallery di Lea Verou, originariamente ospitata su lea.verou.me/css3patterns/. Verou aveva pubblicato demo individuali per tutto il 2010 e fino all'inizio del 2011, inclusa una celebrata spiegazione passo-passo di una scacchiera nel febbraio 2011, prima di annunciare la galleria vera e propria il 15 aprile 2011 in un post intitolato "CSS3 patterns gallery and a new pattern" (il nuovo pattern era un design di cubi giapponesi che lei chiamò il più difficile che avesse mai realizzato). Pochi mesi dopo, il 1° dicembre 2011, scrisse il saggio canonico "CSS3 Patterns, Explained" per il calendario dell'avvento di 24 ways: ancora la migliore spiegazione in inglese semplice della tecnica degli hard color stop che è alla base di ogni striscia, pois e pattern a scacchiera. Nel giugno 2015 O'Reilly pubblicò il suo libro CSS Secrets: Better Solutions to Everyday Web Design Problems, che espandeva il capitolo dei pattern in una tassonomia completa. L'impatto culturale più ampio della galleria è documentato negli appunti di progetto di Verou stessa: "diede inizio alla pratica diffusa di usare hard stop nei gradient CSS per creare facilmente pattern di sfondo e altre grafiche" e fu poi usata dagli ingegneri di Opera Software per affinare la loro implementazione dei gradient.

Dal prefisso vendor alla specifica

I gradient CSS sono definiti nel CSS Image Values and Replaced Content Module Level 3 (comunemente "CSS Images 3"), mantenuto dal W3C CSS Working Group e curato da Tab Atkins Jr. ed Elika J. Etemad fra gli altri. La First Public Working Draft fu il 12 luglio 2011; la specifica raggiunse la Candidate Recommendation nell'aprile 2012, fissando la sintassi moderna senza prefisso, inclusa la convenzione che 0deg punta verso l'alto e to right equivale a 90deg. Ordine di distribuzione del browser: WebKit fu il primo con largo margine, con -webkit-gradient() usabile in Safari 4 (2009); Firefox distribuì -moz-linear-gradient() in Firefox 3.6 (21 gennaio 2010); Internet Explorer 10 distribuì le forme senza prefisso nel 2012; la sintassi senza prefisso si stabilizzò su tutti i motori principali entro la fine del 2013. conic-gradient() fu specificato in CSS Images Level 4 perché Level 3 era già entrato in Last Call quando la sintassi era in fase di progettazione; arrivò in Chrome 69 (4 settembre 2018), Safari 12.1 (25 marzo 2019) e Firefox 83 (17 novembre 2020). Nel 2026 puoi scrivere background: linear-gradient(...) e background: conic-gradient(...) con fiducia senza prefissi e senza fallback per qualsiasi browser degno di supporto.

linear-gradient: angoli e lati

La grammatica formale è linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). La convenzione degli angoli inciampa frequentemente gli sviluppatori perché differisce dalla convenzione SVG/canvas. 0deg equivale a to top (la linea del gradient punta verso l'alto, quindi l'ultimo colore appare in cima alla scatola). 90deg equivale a to right. 180deg equivale a to bottom (il default se non viene data alcuna direzione). 270deg equivale a to left. Gli angoli crescenti ruotano in senso orario dall'alto: l'opposto della convenzione matematica (dove 0 è destra e gli angoli aumentano in senso antiorario) e l'opposto del <linearGradient> SVG. Una sottigliezza utile: to right e 90deg sono equivalenti solo su scatole quadrate. Su una scatola non quadrata, to top right produce una linea di gradient esattamente perpendicolare alla diagonale dall'angolo in basso a sinistra, il che significa che il gradient colpisce l'angolo in modo pulito, mentre 45deg è sempre letteralmente 45 gradi, indipendentemente dall'aspect ratio. Questo conta meno per i pattern a piastrelle (dove le piastrelle sono di solito quadrate) ma conta molto per gli sfondi hero.

radial-gradient: forme, dimensioni e pois

La grammatica è radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). I due valori di forma sono circle ed ellipse (default ellipse). La dimensione può essere una di quattro keyword di estensione (closest-side, closest-corner, farthest-side o farthest-corner, il default) o lunghezze/percentuali esplicite. Per i pattern a pois la ricetta canonica è radial-gradient(circle at center, #000 0 5px, transparent 5px) con background-size: 20px 20px: un cerchio nero di 5 px al centro di ogni piastrella di 20 px, con il resto trasparente. I punti possono essere offset con un secondo livello a metà piastrella per produrre una griglia di punti esagonali. Per pure strisce non hai bisogno di dimensionare la piastrella manualmente: repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) produce strisce diagonali in bianco e nero larghe 10 px, ripetute su tutta la scatola, senza alcuna dichiarazione background-size necessaria. I gradient ripetuti hanno anche controparti radiali e coniche: repeating-radial-gradient fa anelli concentrici, repeating-conic-gradient fa girandole.

conic-gradient: i grafici a torta e i raggi solari che prima non si potevano costruire

conic-gradient() ruota i color stop attorno a un centro invece che lungo una linea o fuori da un centro. I color stop sono posizionati in angoli, non in lunghezze. La storia intellettuale è una delle più interessanti del CSS: Lea Verou redasse una proposta conical-gradient() già nel 2011, ben prima che alcun browser la supportasse, e Tab Atkins Jr. accreditò la sua bozza quando aggiunse formalmente la funzione a CSS Image Values Level 4. L'implementazione restò indietro per anni. Nel giugno 2015, Verou scrisse un polyfill (usando SVG e la sua libreria -prefix-free) e lo rilasciò sul palco al CSSConf, intitolando il post "Conical gradients, today!" La distribuzione nativa arrivò in Chrome 69 (4 settembre 2018), Safari 12.1 (25 marzo 2019) e Firefox 83 (17 novembre 2020). Cosa sbloccano i conic gradient che lineari e radiali non possono: grafici a torta e a ciambella senza canvas, SVG o JS (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) più border-radius: 50% è un grafico a torta completo); ruote di colori (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) produce la ruota di tonalità standard); pattern a raggi solari e starburst da hard-stop alternati a piccoli intervalli di angolo; cornici a gradient e luci d'angolo angolate; e scacchiere in una sola dichiarazione (repeating-conic-gradient(#000 0 25%, #fff 0 50%) più background-size produce una scacchiera con un singolo livello gradient invece di due gradient lineari impilati).

Prestazioni: quando i pattern CSS battono le immagini, e quando no

L'argomento prestazionale per i pattern in puro CSS è quello che vale la pena di essere centrato bene perché viene oversimplificato nelle copy di marketing. Vittorie del puro CSS: niente richiesta HTTP, niente decodifica, niente overhead PNG/JPEG/WebP: una regola CSS di 4 righe sostituisce un file binario; indipendente dalla risoluzione vettoriale: un pattern appare identico a 1×, 2×, 3× device pixel ratio senza necessità di distribuire asset @2x e @3x, che è la singola ragione più grande per cui i design system preferiscono pattern gradient ai PNG per i display retina; banalmente ricolorabile: cambiare una variabile CSS aggiorna l'intero pattern; animabile via background-position o, con @property, via color stop animabili. Costi da conoscere: il costo di paint scala con i pixel toccati e la complessità del gradient: i gradient sono fra le operazioni di paint più costose insieme a box-shadow grandi, SVG complessi ed effetti di testo pesanti, e impilare molti livelli di gradient su un hero a viewport pieno può costare frame su GPU di fascia bassa. Animare i colori del gradient innesca repaint completi a ogni frame (questo sta cambiando con le proprietà custom registrate via @property in Chromium e Firefox, ma è ancora più sicuro animare invece background-position). L'euristica pratica: se hai un singolo pattern a viewport pieno e non lo stai animando, non lo noterai. Se stai impilando cinque livelli di gradient su ogni card in una lista lunga, fai il profiling.

Accessibilità: contrasto, decorazione e movimento ridotto

I pattern di sfondo CSS sono, per definizione, decorativi. Non appaiono nel document tree o nell'accessibility tree; dal punto di vista delle tecnologie assistive semplicemente non esistono. Questa è in gran parte una caratteristica: il tutorial W3C WAI sulle Decorative Images dice esplicitamente che le immagini decorative "dovrebbero essere fornite usando immagini di sfondo CSS invece" di <img> così che siano naturalmente ignorate dagli screen reader. Ma il contrasto si applica ancora a qualsiasi cosa metti sopra il pattern. WCAG 2.1 Success Criterion 1.4.3 richiede un rapporto di contrasto di 4.5:1 per il testo normale e 3:1 per il testo grande. I pattern rendono questo più difficile perché la luminanza locale dello sfondo varia pixel per pixel. La WCAG Technique G18 affronta questo direttamente: se lo sfondo è a pattern, lo sfondo attorno alle lettere può essere scelto o ombreggiato così che le lettere mantengano un rapporto di contrasto di 4.5:1 con lo sfondo dietro di esse, anche se non hanno quel rapporto di contrasto con l'intero sfondo. In pratica: se metti testo sopra un pattern, scegli colori del pattern con luminanza simile fra loro, oppure piazza una card a colore solido tra il testo e il pattern. WCAG 2.1 richiede anche un contrasto 3:1 per componenti UI e grafica non testuale, che può applicarsi a icone e divisori basati su pattern. Se il tuo pattern è animato (una striscia che scorre, un conic che ruota lentamente, uno scheletro shimmer), avvolgi l'animazione in @media (prefers-reduced-motion: no-preference). La motivazione è medica, non stilistica: le animazioni possono innescare sintomi vestibolari (nausea, vertigini), crisi epilettiche in utenti con epilessia fotosensibile ed emicranie.

Pattern SVG contro gradient CSS: un confronto onesto

L'elemento <pattern> SVG è il fratello spirituale dei gradient CSS. Entrambi ti permettono di ripetere a piastrelle una cella unitaria su un'area di riempimento. Hanno punti dolci diversi. I pattern SVG vincono quando l'unità è una forma complessa (una foglia, una squama di pesce, un esagono irregolare) che i gradient non possono esprimere naturalmente; quando vuoi distribuire un asset disegnato da un designer (Hero Patterns di Steve Schoger, lanciato il 27 settembre 2016 sotto CC BY 4.0, è la libreria di pattern SVG canonica); quando hai bisogno di geometria vettoriale precisa per curve nette che gli hard-stop dei gradient possono solo approssimare; o quando vuoi riutilizzare il pattern fra più elementi SVG via fill="url(#myPattern)". I gradient CSS vincono quando il pattern è geometrico: strisce, punti, griglie, scacchiere, chevron, triangoli, qualsiasi cosa componibile da linee rette e cerchi; quando vuoi zero overhead HTTP; quando hai bisogno di personalizzazione per istanza via variabili CSS (--stripe-color: red aggiorna il pattern istantaneamente); quando vuoi applicare il pattern come sfondo CSS a qualsiasi elemento HTML, non solo dentro un SVG; o quando vuoi animare il pattern senza elementi <animate>. Una tecnica ibrida comune è inserire inline un SVG come URL data:image/svg+xml,... dentro background-image: questo ottiene la vittoria "niente richiesta HTTP extra" del puro CSS lasciando ai designer esprimere forme arbitrarie. Lo svantaggio è la noia di codifica: # diventa %23, le doppie virgolette devono essere escapate, e ispezionare l'SVG in DevTools è scomodo. Questo generatore emette pattern gradient in puro CSS; il compromesso è intenzionale, semplicità e payload piccolo invece della massima flessibilità di forma.

Dove i pattern CSS si guadagnano il loro pane

Il genere è più ampio della carta da parati. Usi reali di produzione includono:

• Sfondi delle sezioni hero. Pattern sottili a larga scala dietro al titolo della pagina (linee diagonali, punti grandi, un soffice raggio solare in conic-gradient) danno a un hero una texture visiva senza aggiungere peso di immagine.
• Placeholder per stati vuoti. Quando una lista non ha elementi, un pattern a scacchiera o a griglia nell'area vuota comunica "questo è intenzionalmente vuoto" meglio di uno spazio bianco piatto.
• Skeleton di caricamento. Il classico skeleton "shimmer" è un linear-gradient con bianco semi-trasparente che si muove su uno sfondo grigio, animato via background-position. La tecnica è ora uno standard UX.
• Sfondi di card e badge. Una griglia di punti tenue dietro un badge "Pro" o un gessato diagonale dietro una card di feature aggiunge texture senza competere col testo.
• Stati di errore e avviso. Strisce diagonali ripetute (il pattern dei coni stradali) segnalano "zona di pericolo" intuitivamente. repeating-linear-gradient(45deg, #fbbf24 0 10px, #1f2937 10px 20px) è l'overlay "attenzione" universale.
• Estetica retrò e synthwave. La griglia Tron anni '80, una griglia magenta deformata in prospettiva che rotola verso un orizzonte, è un effetto in puro CSS costruito da un repeating-linear-gradient più transform: perspective(...) rotateX(...).
• Divisori di sezione. Una breve banda di pattern a tutta larghezza tra le sezioni spezza una pagina lunga senza aggiungere peso semantico.
• Perforazioni amichevoli per la stampa. Linee di perforazione tratteggiate per biglietti e coupon stampabili sono più facili da scrivere con repeating-linear-gradient che con SVG.
• Pattern light/dark mode. I pattern si comportano bene tra light e dark mode perché sono guidati da variabili CSS; una dichiarazione si adatta a entrambe le palette.

Come usare

1. Scegli un tipo di motivo: seleziona righe, punti, scacchiera, griglia, zigzag, triangoli e altro, tutti in CSS puro.
2. Personalizza colori e scala: regola colori di primo piano e di sfondo, dimensione del motivo, angolo e spaziatura con i cursori.
3. Visualizza l'anteprima dal vivo: il motivo viene mostrato in tempo reale mentre modifichi le impostazioni.
4. Copia il CSS: copia la proprietà background generata e incollala nel tuo foglio di stile.

Domande frequenti

Il CSS funzionerà in browser più vecchi?

Ogni browser moderno principale distribuisce linear-gradient, radial-gradient e le varianti repeating senza prefisso e attivi di default: la pulizia è stata completata alla fine del 2013. conic-gradient ha richiesto più tempo (Chrome 69 nel settembre 2018, Safari 12.1 nel marzo 2019, Firefox 83 nel novembre 2020) ma è anche universale nel 2026. Il generatore non emette prefissi vendor perché nessuno è necessario per qualsiasi browser degno di supporto. Microsoft Edge ha abbandonato il suo motore EdgeHTML nel gennaio 2020 e IE11 ha raggiunto il fine vita il 15 giugno 2022; entrambi sono ora note storiche per qualsiasi nuovo strumento.

I pattern CSS sono più veloci degli sfondi a immagine ripetuta?

Per pattern statici, sì: un pattern CSS elimina una richiesta HTTP, un passaggio di decodifica e la distribuzione di asset multi-risoluzione richiesta per i display retina. Il pattern è anche vettorialmente perfetto a qualsiasi zoom e banalmente ricolorabile attraverso variabili CSS. Il compromesso è il costo di paint: i gradient sono fra le cose più costose che un browser può dipingere, e impilare molti livelli di gradient su un hero a viewport pieno può costare frame su GPU di fascia bassa. Per un singolo pattern statico su una card o una sezione, non lo noterai. Se ti ritrovi a impilare cinque livelli di gradient su ogni elemento in una lista lunga, fai il profiling prima del deploy.

Come metto del testo sopra un pattern in modo accessibile?

WCAG 2.1 SC 1.4.3 richiede un contrasto di 4.5:1 per il testo normale e 3:1 per il testo grande contro lo sfondo. Con uno sfondo a pattern la luminanza locale varia pixel per pixel, il che può far fallire il contrasto nel caso peggiore anche se il contrasto medio sembra a posto. Due strategie sicure: scegliere colori del pattern con luminanza simile fra loro (così che il contrasto contro il tuo testo sia coerente su tutta la piastrella), o piazzare una card a colore solido tra il testo e il pattern. Mettere il testo direttamente su un pattern ad alto contrasto (es. strisce in bianco e nero) è il caso in cui i checker di contrasto e i lettori umani entrambi faticano.

Posso animare il pattern?

Sì. L'animazione più economica è spostare background-position con @keyframes: questo innesca un aggiornamento solo del compositor sulla maggior parte dei browser e può girare fluidamente a 60 fps. Animare i colori del gradient stessi è più costoso perché ogni frame innesca un paint completo; Chromium e Firefox moderni possono mitigare questo con proprietà custom registrate via @property, ma background-position è il default più sicuro. Avvolgi sempre l'animazione in @media (prefers-reduced-motion: no-preference): gli sfondi animati possono innescare sintomi vestibolari, crisi ed emicranie negli utenti sensibili.

Perché il mio pattern sembra sfocato sui display retina?

Non dovrebbe: è il punto stesso dell'usare gradient invece di immagini bitmap. Se il tuo lo è, controlla che i color stop siano a percentuali nette (un hard stop sono due stop alla stessa posizione; un piccolo gap anche di 50% 50.1% introduce una banda di sfocatura visibile) e che il dimensionamento delle piastrelle sia in px piuttosto che in em o %, che possono interagire in modo imprevedibile con la scalatura del testo. I gradient conici su versioni più vecchie di Safari rendevano il centro come un'area leggermente sfocata; Safari e Chrome moderni rasterizzano entrambi sulla GPU e il problema è in gran parte sparito.

I miei dati vengono inviati da qualche parte?

No. La selezione del pattern, la scelta dei colori, il dimensionamento e la generazione del CSS girano tutti nel tuo browser. Non ci sono richieste in uscita quando usi i controlli: puoi verificarlo nel pannello Network di DevTools. Il CSS generato è tuo da incollare ovunque.

Strumenti correlati