Gradien Radial CSS
Gradien Radial CSS
Gradien radial ditentukan oleh pusatnya.
Untuk membuat gradien radial, Anda juga harus menentukan setidaknya dua perhentian warna.
Sintaksis
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Secara default, bentuknya adalah elips, ukurannya adalah sudut terjauh, dan posisinya berada di tengah.
Radial Gradient - Penghentian Warna dengan Spasi Merata (ini adalah default)
Contoh berikut menunjukkan gradien radial dengan perhentian warna yang berjarak sama:
Contoh
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radial Gradient - Pemberhentian Warna Dengan Spasi Berbeda
Contoh berikut menunjukkan gradien radial dengan perhentian warna dengan spasi berbeda:
Contoh
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Tetapkan Bentuk
Parameter bentuk mendefinisikan bentuk. Itu bisa mengambil lingkaran nilai atau elips. Nilai defaultnya adalah elips.
Contoh berikut menunjukkan gradien radial dengan bentuk lingkaran:
Contoh
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Penggunaan Kata Kunci Ukuran Berbeda
Parameter ukuran menentukan ukuran gradien. Ini dapat mengambil empat nilai:
- sisi terdekat
- sisi terjauh
- sudut terdekat
- sudut terjauh
Contoh
Gradien radial dengan kata kunci ukuran berbeda:
#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);
}
Mengulangi gradien radial
Fungsi repeating-radial-gradient() digunakan untuk mengulang gradien radial:
Contoh
Gradien radial berulang:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}