Mei 26, 2020

Contoh CSS Gradasi Warna untuk Background Color Pada Header

Tulisan kali ini isinya adalah berbagi tentang contoh CSS gradasi warna untuk background color pada header pada blog. Jika bosan dengan warna polos, atau hendak mengganti background image pada header dengan CSS untuk meringankan loading blog, maka tulisan ini bisa membantu.

Sebagaimana terlihat, ketika tulisan ini dibuat, blog ini sedang menggunakan gradasi warna latar untuk header, yang sebelumnya berwarna polos satu warna saja. Gradasi warna juga digunakan di bagian paginasi, yaitu taut sebelum dan sesudah tulisan, dan pada footer.

Halaman blog yang sebelumnya terlihat datar saja, kini ada sedikit warna, dan bagi sebagian orang mungkin lebih enak dilihat. Ya, ini memang soal selera, yang sering tak bisa diperdebatkan dan tak ada benar salah. Yang ada hanya suka, lebih suka, sangat suka, atau kebalikannya.

background color gradasi warna

Berikut ada contoh gradasi warna untuk background color pada header, dan kode CSS-nya.

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(189,195,199,1) 0%, rgba(44,62,80,1) 100%);

CSS maximum compatibility dengan IE6+:
background: rgb(2,0,36);
background: -moz-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(44,62,80,1) 0%, rgba(189,195,199,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#bdc3c7",GradientType=1);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(33,147,176,1) 0%, rgba(70,194,223,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(73,50,64,1) 0%, rgba(189,10,117,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(238,156,167,1) 0%, rgba(255,194,201,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(147,41,30,1) 0%, rgba(237,33,58,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(78,84,200,1) 0%, rgba(126,131,222,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(17,153,142,1) 0%, rgba(50,207,109,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(134,168,231,1) 0%, rgba(138,223,217,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(185,29,115,1) 0%, rgba(235,79,187,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(241,39,17,1) 0%, rgba(227,163,26,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(101,78,163,1) 0%, rgba(224,170,193,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,75,43,1) 0%, rgba(255,65,108,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,131,176,1) 0%, rgba(4,169,205,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,94,98,1) 0%, rgba(242,147,100,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(47,128,237,1) 0%, rgba(84,197,233,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(228,77,38,1) 0%, rgba(241,101,41,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(231,56,39,1) 0%, rgba(248,80,50,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(106,48,147,1) 0%, rgba(152,66,241,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(31,28,24,1) 0%, rgba(142,14,0,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(244,107,69,1) 0%, rgba(238,168,73,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(240,152,25,1) 0%, rgba(226,211,88,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(35,37,38,1) 0%, rgba(65,67,69,1) 100%);

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(194,21,0,1) 0%, rgba(250,197,16,1) 100%);

Cara Memperbesar Facebook Like Button

aroengbinang.com

CSS standar:
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(6,23,0,1) 0%, rgba(80,182,52,1) 100%);

Lihat Video

Semoga ada background-color gradasi untuk header yang cocok dengan selera Anda. Selamat mencoba.
Label: CSS, Tutorial
Bagikan ke: WhatsApp, Email. Print!.

aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.