CSS gradient adalah efek visual yang membuat perubahan warna secara berangsur-angsur dalam sebuah elemen HTML. Ini bisa menjadi alternatif yang menarik untuk warna solid pada latar belakang atau border sebuah elemen. Dalam artikel ini, kita akan membahas bagaimana membuat CSS gradient dengan mudah.
Linear gradient: adalah jenis gradient yang membuat perubahan warna dari satu titik ke titik lain secara berurutan. Contohnya, dari warna merah ke warna kuning ke warna hijau.
Untuk membuat linear gradient, kita menggunakan properti background-image dan menentukan linear-gradient sebagai nilai. Kemudian, kita menentukan arah gradient menggunakan to right, to bottom, to left, to top, to top right, to top left, to bottom right, to bottom left. Selanjutnya, kita menentukan warna yang akan digunakan dalam gradient.
.element {
background-image: linear-gradient(to right, red, yellow, green);
}
Radial Gradient: adalah jenis gradient yang membuat perubahan warna dari titik pusat ke luar. Contohnya, dari warna merah ke warna kuning ke warna hijau.
Untuk membuat radial gradient, kita menggunakan properti background-image dan menentukan radial-gradient sebagai nilai. Selanjutnya, kita menentukan warna yang akan digunakan dalam gradient.
.element {
background-image: radial-gradient(red, yellow, green);
}
Repeating Gradient: adalah jenis gradient yang berulang-ulang dengan pola yang sama. Contohnya, dari warna merah ke warna kuning ke warna hijau.
Untuk membuat repeating gradient, kita menggunakan properti background-image dan menentukan repeating-linear-gradient atau repeating-radial-gradient sebagai nilai.
Kemudian, kita menentukan arah gradient menggunakan to right, to bottom, to left, to top, to top right, to top left, to bottom right, to bottom left (hanya untuk linear gradient). Selanjutnya, kita menentukan warna yang akan digunakan dalam gradient.
.element {
background-image: repeating-linear-gradient(to right, red, yellow 10%, green 10%);
}
Ada banyak variasi dan kombinasi yang dapat diciptakan dengan menggabungkan berbagai teknik gradient. Ingatlah bahwa CSS adalah bahasa pemrograman yang kuat dan fleksibel, sehingga Anda dapat menentukan gradient sesuai dengan keinginan dan kreativitas Anda.
Coding