|
Warna gradien merupakan paduan dari beberapa warna solid sehingga menghasilkan transisi warna tertentu yang mulus antara dua atau lebih warna yang diinginkan.
Warna ini sering diaplikasikan ke berbagai media desain mulai dari aplikasi, desain cetak, logo dan bahkan situs web.
Di artikel kali ini saya akan berbagi koleksi warna gradien lengkap dengan kode warna hex, rgb dan warna kode CSS gradien.
Table of Contents
Jenis CSS Gradien
CSS memiliki 2 jenis gradien, yaitu (1) Linear Gradients (turun / naik / kiri / kanan / diagonal) dan (2) Radial Gradien.
Kolekasi Warna CSS Gradien
Berikut kumpulan koleksi warna css gradien smooth dan keren.
Orange Coral
#ff9966 → #ff5e62
CSS
background: rgb(255,153,102); background: linear-gradient(90deg, rgba(255,153,102,1) 0%, rgba(255,94,98,1) 100%);
Peach
#ed4264 → #ffedbc
CSS
background: rgb(237,66,100); background: linear-gradient(90deg, rgba(237,66,100,1) 0%, rgba(255,237,188,1) 100%);
Sunset
#ff7e5f → #feb47b
CSS
background: rgb(255,126,95); background: linear-gradient(90deg, rgba(255,126,95,1) 0%, rgba(254,180,123,1) 100%);
Celestial
#c33764 → #1d2671
CSS
background: rgb(195,55,100); background: linear-gradient(90deg, rgba(195,55,100,1) 0%, rgba(29,38,113,1) 100%);
Scooter
#36d1dc → #5b86e5
CSS
background: rgb(54,209,220); background: linear-gradient(90deg, rgba(54,209,220,1) 0%, rgba(91,134,229,1) 100%);
Morning
#ff5f6d → #ffc371
CSS
background: rgb(255,95,109); background: linear-gradient(90deg, rgba(255,95,109,1) 0%, rgba(255,195,113,1) 100%);
Relay
#3a1c71 → #d76d77 → #ffaf7b
CSS
background: rgb(58,28,113); background: linear-gradient(90deg, rgba(58,28,113,1) 0%, rgba(215,109,119,1) 49%, rgba(255,175,123,1) 100%);
Night Love
#4568dc → #b06ab3
CSS
background: rgb(69,104,220); background: linear-gradient(90deg, rgba(69,104,220,1) 0%, rgba(176,106,179,1) 100%);
River
#43cea2 → #185a9d
CSS
background: rgb(67,206,162); background: linear-gradient(90deg, rgba(67,206,162,1) 0%, rgba(24,90,157,1) 100%);
Sleeping Baby
#ddd6f3 → #faaca8
CSS
background: rgb(221,214,243); background: linear-gradient(90deg, rgba(221,214,243,1) 0%, rgba(250,172,168,1) 100%);
Frost
#000428 → #004e92
CSS
background: rgb(0,4,40); background: linear-gradient(90deg, rgba(0,4,40,1) 0%, rgba(0,78,146,1) 100%);
Pinkly
#d66d75 → #e29587
CSS
background: rgb(214,109,117); background: linear-gradient(90deg, rgba(214,109,117,1) 0%, rgba(226,149,135,1) 100%);
Green Sky
#02aab0 → #00cdac
CSS
background: rgb(2,170,176); background: linear-gradient(90deg, rgba(2,170,176,1) 0%, rgba(0,205,172,1) 100%);
Pale Wood
#eacda3 → #d6ae7b
CSS
background: rgb(234,205,163); background: linear-gradient(90deg, rgba(234,205,163,1) 0%, rgba(214,174,123,1) 100%);
Rose Bud
#eecda3 → #ef629f
CSS
background: rgb(238,205,163); background: linear-gradient(90deg, rgba(238,205,163,1) 0%, rgba(239,98,159,1) 100%);
Cloudy
#614385 → #516395
CSS
background: rgb(97,67,133); background: linear-gradient(90deg, rgba(97,67,133,1) 0%, rgba(81,99,149,1) 100%);
Banana Leaf
#56ab2f → #a8e063
CSS
background: rgb(86,171,47); background: linear-gradient(90deg, rgba(86,171,47,1) 0%, rgba(168,224,99,1) 100%);
Pinky
#dd5e89 → #f7bb97
CSS
background: rgb(221,94,137); background: linear-gradient(90deg, rgba(221,94,137,1) 0%, rgba(247,187,151,1) 100%);
Cherry
#eb3349 → #f45c43
CSS
background: rgb(235,51,73); background: linear-gradient(90deg, rgba(235,51,73,1) 0%, rgba(244,92,67,1) 100%);
Mealting Ice
#06beb6 → #48b1bf
CSS
background: rgb(6,190,182); background: linear-gradient(90deg, rgba(6,190,182,1) 0%, rgba(72,177,191,1) 100%);
Roseanna
#ffafbd → #ffc3a0
CSS
background: rgb(255,175,189); background: linear-gradient(90deg, rgba(255,175,189,1) 0%, rgba(255,195,160,1) 100%);
Dusty Grass
#d4fc79 → #96e6a1
CSS
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
Deep Blue
#e0c3fc → #8ec5fc
CSS
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
Hulk
#0ba360 → #3cba92
CSS
background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
Notebook
#9795f0 → #fbc8d4
CSS
background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
Penutup
Nah itu tadi koleksi warna gradients CSS populer dan terbaik. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.