Gradienti ripetuti CSS - Trucchi CSS | Frammenti di codice 2025

Gradienti Ripetizione di prendere un trucco possiamo già fare con l'uso creativo della color-stopssulla linear-gradient()e radial-gradient()notazioni, e cuoce in per noi.

L'idea è che possiamo creare modelli dai gradienti che creiamo e consentire loro di ripetersi all'infinito.

Confronto di un gradiente lineare (a sinistra) con un gradiente lineare ripetuto (a destra).

C'è un trucco, con sfumature non ripetitive, per creare il gradiente in modo tale che se fosse un piccolo rettangolo minuscolo, si allineerebbe con altre piccole versioni rettangolari di se stesso per creare un motivo ripetuto. Quindi essenzialmente crea quel gradiente e imposta il background-sizeper creare quel piccolo rettangolo minuscolo. Ciò ha reso facile creare strisce, che è possibile ruotare o altro.

Sintassi

Esistono tre tipi di gradienti ripetuti, due dei quali sono attualmente supportati nelle specifiche ufficiali e uno che si trova nell'attuale bozza di lavoro.

La sintassi per ciascuna notazione è la stessa del relativo tipo di gradiente. Ad esempio, repeating-linear-gradient()segue la stessa sintassi di linear-gradient().

Ripetizione del gradiente	Notazione correlata	Supportato?
`repeating-linear-gradient()`	`linear-gradient()`	sì
`repeating-radial-gradient`	`radial-gradient()`	sì
`repeating-conic-gradient`	`conic-gradient()`	No

Il punto in cui il gradiente si ripete è determinato dall'interruzione del colore finale . Se questo è a 20px, la dimensione del gradiente (che poi si ripete) è 20pxda 20pxpiazzare. Lo stesso vale se ci sono più colori concatenati al motivo. Il colore finale con lo stop finale è ciò che determina la dimensione e la posizione della ripetizione.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

Guarda la Pen lAkyo di Chris Coyier (@chriscoyier) su CodePen.

Lo stesso con radiale:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

Guarda le sfumature ripetute della penna di Chris Coyier (@chriscoyier) su CodePen.

Supporto browser

I gradienti ripetuti attualmente godono di un ottimo supporto del browser. Detto questo, stiamo parlando solo di gradienti lineari e radiali al momento della stesura di questo articolo perché i gradienti conici sono ancora una caratteristica proposta nella bozza di lavoro di Livello 4 della specifica. Speriamo di vedere un'ampia adozione una volta raggiunta la raccomandazione del candidato.

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.