Modern Gradients Library 🎨

A curated collection of vibrant, ready-to-use gradients powered by Pumki UI.

Copy the Tailwind, CSS, or SASS classes and bring your UI to life in seconds.

Yellow Gradients

Harmonic Energy

#16A085, #F4D03F

bg-gradient-to-r from-[#16A085] to-[#F4D03F]

Combi

#00416A, #799F0C, #FFE000

bg-gradient-to-r from-[#00416A] via-[#799F0C] to-[#FFE000]

Mango Pulp

#F09819, #EDDE5D

bg-gradient-to-r from-[#F09819] to-[#EDDE5D]

Tejas

#e65c00, #F9D423

bg-gradient-to-r from-[#e65c00] to-[#F9D423]

Juicy Orange

#FF8008, #FFC837

bg-gradient-to-r from-[#FF8008] to-[#FFC837]

Kyoto

#c21500, #ffc500

bg-gradient-to-r from-[#c21500] to-[#ffc500]

Citrus Horizon

#ffdd00, #ffe97f, #fff5cc

bg-gradient-to-r from-[#ffdd00] via-[#ffe97f] to-[#fff5cc]

Golden Hour Luxe

#f9d423, #ffda6b, #ffefba

bg-gradient-to-r from-[#f9d423] via-[#ffda6b] to-[#ffefba]

Solar Dawn

#ffd86f, #fff3b0, #fffbe0

bg-gradient-to-r from-[#ffd86f] via-[#fff3b0] to-[#fffbe0]

Amber Sunlight

#ffb347, #ffd88f, #fff5e1

bg-gradient-to-r from-[#ffb347] via-[#ffd88f] to-[#fff5e1]

Honey Peach Glow

#f6d365, #fecd9b, #fda085

bg-gradient-to-r from-[#f6d365] via-[#fecd9b] to-[#fda085]

Citrus Bloom

#ffdd00, #fff5cc

bg-gradient-to-r from-[#ffdd00] to-[#fff5cc]

Golden Hour Mist

#f9d423, #ffefba

bg-gradient-to-r from-[#f9d423] to-[#ffefba]

Solar Silk

#ffd86f, #fffbe0

bg-gradient-to-r from-[#ffd86f] to-[#fffbe0]

Amber Frost

#ffb347, #fff5e1

bg-gradient-to-r from-[#ffb347] to-[#fff5e1]

Honey Glow

#f6d365, #fda085

bg-gradient-to-r from-[#f6d365] to-[#fda085]

Lemon Frost

#fdfb9f, #ffffff

bg-gradient-to-r from-[#fdfb9f] to-[#ffffff]

Summer Breeze

#fbed96, #abecd6

bg-gradient-to-r from-[#fbed96] to-[#abecd6]

Veer

#FFE000, #799F0C

bg-gradient-to-r from-[#FFE000] to-[#799F0C]

Mango

#ffe259, #ffa751

bg-gradient-to-r from-[#ffe259] to-[#ffa751]

Rea

#FFE000, #799F0C

bg-gradient-to-r from-[#FFE000] to-[#799F0C]

Sunny Days

#EDE574, #E1F5C4

bg-gradient-to-r from-[#EDE574] to-[#E1F5C4]

Opa

#3D7EAA, #FFE47A

bg-gradient-to-r from-[#3D7EAA] to-[#FFE47A]

Peach

#ED4264, #FFEDBC

bg-gradient-to-r from-[#ED4264] to-[#FFEDBC]

Vasily

#e9d362, #333333

bg-gradient-to-r from-[#e9d362] to-[#333333]

Jonquil

#FFEEEE, #DDEFBB

bg-gradient-to-r from-[#FFEEEE] to-[#DDEFBB]

Sirius Tamed

#EFEFBB, #D4D3DD

bg-gradient-to-r from-[#EFEFBB] to-[#D4D3DD]

Autumn

#DAD299, #B0DAB9

bg-gradient-to-r from-[#DAD299] to-[#B0DAB9]

Dance To Forget

#FF4E50, #F9D423

bg-gradient-to-r from-[#FF4E50] to-[#F9D423]

Shore

#70e1f5, #ffd194

bg-gradient-to-r from-[#70e1f5] to-[#ffd194]

Martini

#FDFC47, #24FE41

bg-gradient-to-r from-[#FDFC47] to-[#24FE41]

Pastel Orange at the Sun

#ffb347, #ffcc33

bg-gradient-to-r from-[#ffb347] to-[#ffcc33]

Fresh Turboscent

#F1F2B5, #135058

bg-gradient-to-r from-[#F1F2B5] to-[#135058]

Ukraine

#004FF9, #FFF94C

bg-gradient-to-r from-[#004FF9] to-[#FFF94C]

Dark Knight

#BA8B02, #181818

bg-gradient-to-r from-[#BA8B02] to-[#181818]

Master Card

#f46b45, #eea849

bg-gradient-to-r from-[#f46b45] to-[#eea849]

Back to the Future

#C02425, #F0CB35

bg-gradient-to-r from-[#C02425] to-[#F0CB35]

Rajput Vikings

#5614B0, #DBD65C

bg-gradient-to-r from-[#5614B0] to-[#DBD65C]

Kanha Bright

#f7ff00, #db36a4

bg-gradient-to-r from-[#f7ff00] to-[#db36a4]

Sweet Morning

#FF5F6D, #FFC371

bg-gradient-to-r from-[#FF5F6D] to-[#FFC371]

Golden Hour

#FFD700, #FFA500, #FF6347

bg-gradient-to-r from-[#FFD700] via-[#FFA500] to-[#FF6347]

Midnight Blue

#191654, #43C6AC, #F8FFAE

bg-gradient-to-r from-[#191654] via-[#43C6AC] to-[#F8FFAE]

Rose Gold

#ED4264, #FFEDBC, #FFD700

bg-gradient-to-r from-[#ED4264] via-[#FFEDBC] to-[#FFD700]

Autumn Leaves

#FF4500, #FF6347, #FFD700

bg-gradient-to-r from-[#FF4500] via-[#FF6347] to-[#FFD700]

Neon Nights

#FF1493, #00FFFF, #ADFF2F

bg-gradient-to-r from-[#FF1493] via-[#00FFFF] to-[#ADFF2F]