20+ Koleksi Warna CSS Gradients Terbaik

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.

Jenis CSS Gradien

CSS memiliki 2 jenis gradien, yaitu (1) Linear Gradients (turun / naik / kiri / kanan / diagonal) dan (2) Radial Gradien.

Situs Penyedia Warna Linear Gradient Desain Grafis 2024 - InpuTekno

Referensi situs web penyedia warna linear gradient untuk proyek desain grafis kamu.

www.inputekno.com

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%);

Mana Yang Haru Kamu Pilih! Warna RGB vs CMYK? - InpuTekno

Mana Yang Haru Kamu Pilih! Warna RGB vs CMYK? Pahami perbedaan dari kedua warna tersebut.

www.inputekno.com

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.