Membuat Tampilan Gradasi Warna yang Keren CCS Linear Gradient

Source: Designsheck.net

Pembahasan kali ini adalah tentang Membuat Tampilan Gradasi Warna yang Keren CCS Linear Gradient di blog. Ketika mengedit blog terkadang kita ingin mengganti warna header agar tampil lebih menarik lagi. Disamping itu CCS Linear Gradient tidak hanya untuk mengganti warna header juga akan tetapi bisa juga untuk highlight postingan pada blog, digunakan pada bagian sebelum atau sesudah tautan paginasi, footer dan masih banyak lagi.

Linear Gradient atau gradasi warna linear

Namun sebelum itu, kita harus tau dulu apa itu CCS linear gradiant atau gradasi warna linear? Adalah efek dari sebuha gambar yang menghasilkan perubahan warna (gradasi) antara 2 warna bahkan lebih. Warna gradasi bercampur dari atas kebawah atau sebaliknya (vertikal). Namun bisa juga dari kanan ke kiri atau sebaliknya (horizontal).

Jika kita paham dengan kode CCS linear gradiant maka dengan mudah kita bisa mempercantik blog agar dapat menarik pengunjung yang lebih banyak. Tidak hanya itu saja, blog yang semula tampilannya terlihat biasa aja namun ketika warna headar dan tampilan lainnya diubah maka blog akan terlihat lebih keren. Asalkan kita pintar-pintar mendesign blog dengan baik dan benar.

Selanjutnya kita akan bahas beberapa contoh gradasi warna linear beserta kodenya:

www.etalk1.com

Kode CCS: background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,206,45,0.9561202552292373) 100%);

www.etalk1.com

Kode CCS: background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(186,194,203,1) 100%);

www.etalk1.com

Kode CCS: background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(68,200,213,1) 41%, rgba(85,156,171,1) 95%);

www.etalk1.com

Kode CCS: background: rgb(206,206,206);
background: linear-gradient(90deg, rgba(206,206,206,1) 0%, rgba(35,110,194,0.2951333234598349) 100%);

www.etalk1.com

Kode CCS: background: rgb(4,24,126);
background: linear-gradient(90deg, rgba(4,24,126,1) 0%, rgba(172,92,150,1) 100%);

www.etalk1.com

Kode CCS: background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(215,29,29,1) 41%, rgba(140,171,85,1) 95%);

www.etalk1.com

Kode CCS: background: rgb(150,118,78);
background: radial-gradient(circle, rgba(150,118,78,0.9667518269884717) 7%, rgba(176,142,82,0.6907377609839807) 93%);

www.etalk1.com

Kode CCS: background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);

www.etalk1.com

Kode CCS: background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

www.etalk1.com

Kode CCS: background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);

www.etalk1.com

Kode CCS: background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);

www.etalk1.com

Kode CCS: background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);

www.etalk1.com

Kode CCS: background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

www.etalk1.com

Kode CCS: background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%); 

www.etalk1.com

Kode CCS: background-color: #d387ab;
background-image: linear-gradient(315deg, #d387ab 0%, #b279a7 74%); 

www.etalk1.com

Kode CCS: background-color: #230903;
background-image: linear-gradient(315deg, #230903 0%, #d3b88c 74%);

www.etalk1.com

Kode CCS: background-image: linear-gradient(315deg, #cab6cd 0%, #ba8f95 74%);

www.etalk1.com

Kode CCS: background-image: linear-gradient(315deg, #b2505c 0%, #4c131a 74%);

www.etalk1.com

Kode CCS: background-color: #fff293; background-image: linear-gradient(315deg, #fff293 0%, #ffe884 74%);

www.etalk1.com

Kode CCS: background-color: #ffcdb2; background-image: linear-gradient(315deg, #ffcdb2 0%, #ffb4a2 74%);

www.etalk1.com

Kode CCS: background-color: #f7accf; background-image: linear-gradient(147deg, #f7accf 0%, #ff1053 74%);

www.etalk1.com

Kode CCS: background-color: #ffffb5; background-image: linear-gradient(315deg, #ffffb5 0%, #247ba0 74%);

www.etalk1.com

Kode CCS: background: rgb(98,181,188); background: linear-gradient(90deg, rgba(98,181,188,0.7857142909542545) 0%, rgba(55,150,157,1) 100%);

www.etalk1.com

Kode CCS: background: rgb(74,71,71); background: linear-gradient(90deg, rgba(74,71,71,1) 0%, rgba(253,99,29,1) 50%, rgba(252,203,69,1) 100%);

www.etalk1.com

Kode CCS: background: rgb(169,59,204); background: linear-gradient(90deg, rgba(169,59,204,0.7857142909542545) 0%, rgba(116,178,174,1) 100%);

Nah, begitulah penjelasan singkat yang dapat etalk1 bagikan. Secara garis besar dapat kita simpulkan  bahwa dengan menggunakan CCS linear gradiant dapat mengubah tampilan dengan image atau warna yang keren. Semoga dengan artikel ini dapat menginspirasi para blogger agar menjadi seorang blogger yang terkenal. 

Silahkan kunjungi wesbite: www.etalk1.com agar tidak ketinggalan info menarik lainnya. Sharing is caring dan Selamat Berkunjung!