Gradien Radial CSS

Gradien Radial CSS

Gelombang radial ditentukan oleh pusatnya.

Untuk membuat gelombang radial, Anda harus mendefinisikan setidaknya dua warna penanda.

语法

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

secara default,shape untuk bentuk elips,size untuk sudut terjauh,position di tengah.

Gelombang radial - warna penanda dengan jarak yang beraturan (default)

Contoh di bawah ini menunjukkan gelombang radial yang memiliki jarak antar warna yang beraturan:

Contoh

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

Coba Sendiri

Gelombang radial - warna penanda dengan jarak yang berbeda

Contoh di bawah ini menunjukkan gelombang radial yang memiliki jarak antar warna yang berbeda:

Contoh

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

Coba Sendiri

Mengatur bentuk

shape Parameter menentukan bentuk. Ia menerima nilai circle atau ellipse. Nilai defaultnya adalah ellipse (椭圆).

Contoh di bawah ini menunjukkan gelombang radial yang berbentuk lingkaran:

Contoh

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

Coba Sendiri

Menggunakan kata kunci ukuran yang berbeda

size Parameter menentukan ukuran gelombang. Ia menerima empat nilai:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Contoh

Ditetapkan variasi ukuran kata kunci radial-gradient:

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

Coba Sendiri

Gradien radial yang diulang

repeating-radial-gradient() Fungsi untuk gradien radial yang diulang:

Contoh

Gradien radial yang diulang:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Coba Sendiri

Properti Gradien CSS

Tabel di bawah ini menampilkan properti gradien CSS:

Properti Deskripsi
background-image Atur satu atau beberapa gambar latar untuk elemen.