Cara membuat Warna Gradient Dengan CSS

Hai Sobat Codes, Kembali lagi dengan Mimin Disini.
Kali ini mimin bakal share sedikit info nih, Tentang Bagaimana caranya memberi Warna Gradient pada Tag <hr> Dengan CSS Style.
Ok Dari pada Berlama-lama, Mari kita simak baik-baik Artikel Berikut ini.

Pada Style Gradients Ada dua macam Type Gradient:
1.radial-gradient
Untuk radial-gradient, Biasanya Warna Perpaduan campuran Warna nya tuh akan membentuk Lingkaran, Yah Kira-Kira sih seperti itu, hehehe.... Maaf ya mimin agak Binggung Menjelaskan nya.

Gambar 1

2.linear-gradient
Kalo Yang satu ini berbeda dengan radial-gradient, yang ini hanya memberi warna gradiasi secara menyeluruh dan, warna Campurannya tidak akan terlihat membentuk lingkaran.

Gambar 2

Baca Juga: Cara Merubah Warna Background Dan Text Saat Di Block

Disini saya akan Memberikan Contoh, disini saya akan mencoba memberi warna gradient pada tag <hr>.
Contoh 1
Disini Saya Akan mencoba memberikan warna Gradient pada Gambar ke-2.
Langsung saja Copy Code CSS nya.

.hr2{

border:4px solid;

border-image-source:linear-gradient(90deg, rgba(227,252,10,1) 20%, rgba(30,214,8,1) 20%, rgba(30,214,8,1) 40%, rgba(0,128,128,1) 40%, rgba(0,128,128,1) 60%, rgba(227,15,0,1) 60%, rgba(227,15,0,1) 80%, rgba(131,131,131,1) 80%);

border-image-slice: 1;

}

Untuk HTML nya:

<hr class="hr2" width="50%">

Contoh 2
Untuk Contoh Ke-2 Saya Akan Coba Memberikan Warna Gradient seperti Gambar Berikut ini.

Untuk CSS:

.hr4{

border:4px solid;

border-image-source:linear-gradient(0deg, rgba(247,13,131,1) 19%, rgba(253,187,45,1) 100%);

border-image-slice: 1;

}

HTML kode:

<hr class="hr4" width="50%">

Contoh 3
Untuk contoh Berikut ini Saya Akan memberikan Warna Gradient seperti gambar dibawah Ini.

Untuk CSS Nya:

.hr5{

border:4px solid;

border-image-source:radial-gradient(circle, rgba(255,36,132,1) 0%, rgba(4,105,224,1) 100%);

border-image-slice: 1;

}

Untuk HTML:

<hr class="hr5" width="50%">

Untuk Kalian Yang pengen Memberikan Warna nya sesuai keinginan Kalian, Kalian Bisa Kunjungi Situs Ini. 

Sekian dari artikel kali ini, semoga bermanfaat.