Fungsi CSS radial-gradient()

Halaman sebelumnya Fungsi pow() CSS
Halaman berikutnya Fungsi ray() CSS
Kembali ke tingkat atas Panduan Referensi Fungsi CSS

Definisi dan penggunaan

CSS radial-gradient() Fungsi mengatur gradasi radial sebagai gambar latar belakang.

Gradasi radial ditentukan oleh pusatnya.

Untuk membuat gradasi radial, perlu mendefinisikan setidaknya dua penanda warna.

Contoh gradasi radial:

实例

contoh 1

佩蒂尔均匀分布的径向渐变：

#grad {
  background-image: radial-gradient(red, green, blue);
}

Coba sendiri

contoh 2

佩蒂尔分布不同的径向渐变：

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Coba sendiri

Contoh 3

Gradien radial berbentuk lingkaran:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Coba sendiri

Contoh 4

Gradien radial dengan kata kunci ukuran yang berbeda:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Coba sendiri

Sintaks CSS

radial-gradient(shape size at position, start-color, ... , last-color);

Nilai	Deskripsi
shape	Definisi bentuk gradien. Nilai yang mungkin: ellipse (default) circle
size	Definisi ukuran gradien. Nilai yang mungkin: farthest-corner (default) closest-side closest-corner farthest-side
position	Definisi posisi gradien. Nilai default adalah "center".
start-color, ... , last-color	Penanda warna adalah warna yang Anda inginkan untuk muncul transisi lancar diantara mereka. Nilai ini terdiri dari nilai warna, diikuti dengan satu atau dua posisi penanda warna pilihan (persen dari 0% hingga 100% atau panjang sepanjang sumbu gradien).