Fungsi radial-gradient() CSS

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

Pengertian dan penggunaan

CSS radial-gradient() Fungsi mengatur pengedaran graden sebagai imej latar belakang.

Pengedaran graden ditakrifkan oleh pusatnya.

Untuk membuat pengedaran graden, perlu ditakrifkan sedikitnya dua penanda warna.

Contoh pengedaran graden radial:

Contoh

Contoh 1

Pengedaran graden berwarna yang disemua berdasarkan arah radial:

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

Coba sendiri

Contoh 2

Pengedaran graden berwarna berbeza berdasarkan arah radial:

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

Coba sendiri

Contoh 3

Gradasi radial berbentuk lingkaran:

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

Coba sendiri

Contoh 4

Gunakan kata kunci ukuran yang berbeda untuk gradasi radial:

#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(bentuk ukuran at lokasi, start-color, ... , last-color);

Nilai	Deskripsi
bentuk	Tentukan bentuk gradasi. Nilai yang mungkin : ellipse (baku) circle
ukuran	Tentukan ukuran gradasi. Nilai yang mungkin : farthest-corner (baku) closest-side closest-corner farthest-side
lokasi	Tentukan lokasi gradasi. Nilai baku adalah "center".
start-color, ... , last-color	Tanda warna adalah warna yang Anda inginkan untuk menampilkan transisi lancar diantara warna. Nilai ini terdiri dari nilai warna, diikuti dengan satu atau dua lokasi tanda warna pilihan (persen 0% hingga 100% atau panjang sepanjang sumbu gradasi).