27 Contoh Gradien Latar Belakang CSS yang Bergaya

Tetap mengikuti tren dan standar desain web teratas sangat penting bagi seorang desainer atau pengembang. Saat ini, gradien latar belakang banyak digunakan di situs web modern.

Pada artikel ini, kami akan memandu Anda melalui berbagai contoh gradien latar belakang menggunakan CSS.

Gradien Latar Belakang Menggunakan CSS

Gradien CSS menampilkan transisi yang mulus menggunakan dua atau lebih warna tertentu. Gradien CSS memberikan kontrol dan kinerja yang lebih baik daripada menggunakan file gambar (dari gradien) yang sebenarnya. NS gambar latar belakang Properti CSS digunakan untuk mendeklarasikan gradien sebagai latar belakang.

cara mengaktifkan bluetooth di windows 7

Ada tiga jenis gradien: linier (dibuat dengan gradien linier() fungsi), radial (dibuat dengan radial-gradien() fungsi), dan berbentuk kerucut (dibuat dengan gradien kerucut() fungsi). Juga, Anda dapat membuat gradien berulang dengan mengulangi-linear-gradien() , berulang-radial-gradien() , dan berulang-kerucut-gradien() fungsi.

MDN Docs mendefinisikan fungsi-fungsi ini sebagai:

gradien linier() : Fungsi CSS linear-gradient() membuat gambar yang terdiri dari transisi progresif antara dua warna atau lebih di sepanjang garis lurus. Hasilnya adalah objek dari tipe data, yang merupakan jenis khusus dari .

radial-gradien() : NS radial-gradien() Fungsi CSS membuat gambar yang terdiri dari transisi progresif antara dua atau lebih warna yang memancar dari asal. Bentuknya mungkin lingkaran atau elips. Hasil fungsi adalah objek dari tipe data, yang merupakan jenis khusus dari .

gradien kerucut() : NS gradien kerucut() Fungsi CSS membuat gambar yang terdiri dari gradien dengan transisi warna yang diputar di sekitar titik tengah (bukan memancar dari pusat). Contoh gradien kerucut termasuk diagram lingkaran dan roda warna. Hasil dari gradien kerucut() fungsi adalah objek dari tipe data, yang merupakan jenis khusus dari .

mengulangi-linear-gradien() : NS mengulangi-linear-gradien() Fungsi CSS membuat gambar yang terdiri dari gradien linier berulang. Ini mirip dengan gradien/linier-gradien() dan mengambil argumen yang sama, tetapi mengulangi warna berhenti tanpa batas ke segala arah sehingga menutupi seluruh wadahnya. Hasil fungsi adalah objek dari tipe data, yang merupakan jenis khusus dari .

berulang-radial-gradien() : NS berulang-radial-gradien() Fungsi CSS membuat gambar yang terdiri dari gradien berulang yang memancar dari asal. Ini mirip dengan gradien/radial-gradien() dan mengambil argumen yang sama, tetapi mengulangi warna berhenti tanpa batas ke segala arah sehingga menutupi seluruh wadahnya, mirip dengan gradien/pengulangan-linier-gradien(). Hasil fungsi adalah objek dari tipe data, yang merupakan jenis khusus dari .

berulang-kerucut-gradien() : NS berulang-kerucut-gradien() Fungsi CSS membuat gambar yang terdiri dari gradien berulang (bukan gradien tunggal) dengan transisi warna yang diputar di sekitar titik tengah (bukan memancar dari pusat).

Berikut sintaks resmi dari setiap jenis gradien.

Sintaks Resmi Gradien Linear

linear-gradient(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

Sintaks Resmi Gradien Radial

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

Sintaks Resmi Gradien Kerucut

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

Berikut adalah beberapa contoh gradien latar belakang mengagumkan yang dapat meningkatkan UI situs web Anda ke tingkat berikutnya.