CSS Berulang Gradien - Trik CSS | Cuplikan Kode 2025

Mengulangi gradien mengambil trik kita sudah bisa melakukan dengan penggunaan kreatif color-stopspada linear-gradient()dan radial-gradient()notasi, dan bakes dalam bagi kita.

Idenya adalah kita dapat membuat pola dari gradien yang kita buat dan membiarkannya berulang tanpa batas.

Membandingkan gradien linier (kiri) dengan gradien linier berulang (kanan).

Ada trik, dengan gradien yang tidak berulang, untuk membuat gradien sedemikian rupa sehingga jika itu adalah persegi panjang kecil, itu akan berbaris dengan versi persegi panjang kecil lainnya itu sendiri untuk membuat pola berulang. Jadi pada dasarnya buat gradien itu dan atur background-sizeuntuk membuat persegi panjang kecil itu. Itu membuatnya mudah untuk membuat garis-garis, yang kemudian dapat Anda putar atau apa pun.

Sintaksis

Ada tiga jenis gradien berulang, dua di antaranya saat ini didukung dalam spesifikasi resmi dan satu lagi di draft kerja saat ini.

Sintaks untuk setiap notasi sama dengan jenis gradien terkait. Misalnya, repeating-linear-gradient()mengikuti sintaks yang sama seperti linear-gradient().

Mengulangi Gradien	Notasi Terkait	Didukung?
`repeating-linear-gradient()`	`linear-gradient()`	Iya
`repeating-radial-gradient`	`radial-gradient()`	Iya
`repeating-conic-gradient`	`conic-gradient()`	Tidak

Di mana gradien berulang ditentukan oleh penghentian warna akhir . Jika itu sama 20px, ukuran gradien (yang kemudian berulang) adalah persegi 20pxper 20pxpersegi. Hal yang sama berlaku jika ada beberapa warna yang dirantai ke pola. Warna akhir dengan perhentian terakhir adalah yang menentukan ukuran dan lokasi pengulangan.

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

Lihat Pen lAkyo oleh Chris Coyier (@chriscoyier) di CodePen.

Sama dengan radial:

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

Lihat Gradien Berulang Pena oleh Chris Coyier (@chriscoyier) di CodePen.

Dukungan Browser

Gradien berulang saat ini menikmati dukungan browser yang hebat. Karena itu, kami hanya berbicara tentang gradien linier dan radial pada saat penulisan ini karena gradien kerucut masih merupakan fitur yang diusulkan dalam draf kerja Level 4 spesifikasi. Kami berharap kami melihat adopsi yang luas setelah mencapai rekomendasi kandidat.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.