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.

Green Gradients

Combi

#00416A, #799F0C, #FFE000

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

Khushi

#00F5A0, #00D9F5

bg-gradient-to-r from-[#00F5A0] to-[#00D9F5]

Radioactive Heat

#F7941E, #72C6EF, #00A651

bg-gradient-to-r from-[#F7941E] via-[#72C6EF] to-[#00A651]

Summer Breeze

#fbed96, #abecd6

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

Veer

#FFE000, #799F0C

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

Veer Black

#F7F8F8, #ACBB78

bg-gradient-to-r from-[#F7F8F8] to-[#ACBB78]

Reaqua

#799F0C, #ACBB78

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

Rea

#FFE000, #799F0C

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

Sel

#00467F, #A5CC82

bg-gradient-to-r from-[#00467F] to-[#A5CC82]

Sunny Days

#EDE574, #E1F5C4

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

Emerald Water

#348F50, #56B4D3

bg-gradient-to-r from-[#348F50] to-[#56B4D3]

Lemon Twist

#3CA55C, #B5AC49

bg-gradient-to-r from-[#3CA55C] to-[#B5AC49]

Mojito

#1D976C, #93F9B9

bg-gradient-to-r from-[#1D976C] to-[#93F9B9]

Moss

#134E5E, #71B280

bg-gradient-to-r from-[#134E5E] to-[#71B280]

Sea Blizz

#1CD8D2, #93EDC7

bg-gradient-to-r from-[#1CD8D2] to-[#93EDC7]

Army

#414d0b, #727a17

bg-gradient-to-r from-[#414d0b] to-[#727a17]

Petrichor

#666600, #999966

bg-gradient-to-r from-[#666600] to-[#999966]

Jonquil

#FFEEEE, #DDEFBB

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

Misty Meadow

#215f00, #e4e4d9

bg-gradient-to-r from-[#215f00] to-[#e4e4d9]

Autumn

#DAD299, #B0DAB9

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

Candy

#D3959B, #BFE6BA

bg-gradient-to-r from-[#D3959B] to-[#BFE6BA]

Earthly

#649173, #DBD5A4

bg-gradient-to-r from-[#649173] to-[#DBD5A4]

Virgin

#C9FFBF, #FFAFBD

bg-gradient-to-r from-[#C9FFBF] to-[#FFAFBD]

Parklife

#ADD100, #7B920A

bg-gradient-to-r from-[#ADD100] to-[#7B920A]

Neon Life

#B3FFAB, #12FFF7

bg-gradient-to-r from-[#B3FFAB] to-[#12FFF7]

Behongo

#52c234, #061700

bg-gradient-to-r from-[#52c234] to-[#061700]

Martini

#FDFC47, #24FE41

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

Green to dark

#6A9113, #141517

bg-gradient-to-r from-[#6A9113] to-[#141517]

Sage Persuasion

#CCCCB2, #757519

bg-gradient-to-r from-[#CCCCB2] to-[#757519]

Back To Earth

#00C9FF, #92FE9D

bg-gradient-to-r from-[#00C9FF] to-[#92FE9D]

Little Leaf

#76b852, #8DC26F

bg-gradient-to-r from-[#76b852] to-[#8DC26F]

Green and Blue

#c2e59c, #64b3f4

bg-gradient-to-r from-[#c2e59c] to-[#64b3f4]

Christmas

#2F7336, #AA3A38

bg-gradient-to-r from-[#2F7336] to-[#AA3A38]

Forest

#5A3F37, #2C7744

bg-gradient-to-r from-[#5A3F37] to-[#2C7744]

Gwalior

#a80077, #66ff00

bg-gradient-to-r from-[#a80077] to-[#66ff00]

Forest Mist

#134E5E, #71B280, #A8E6CF

bg-gradient-to-r from-[#134E5E] via-[#71B280] to-[#A8E6CF]

Arctic Aurora

#00F5FF, #00CED1, #20B2AA

bg-gradient-to-r from-[#00F5FF] via-[#00CED1] to-[#20B2AA]

Emerald City

#11998e, #38ef7d, #7fefb2

bg-gradient-to-r from-[#11998e] via-[#38ef7d] to-[#7fefb2]

Electric Lime

#8EE000, #32CD32, #00FF7F

bg-gradient-to-r from-[#8EE000] via-[#32CD32] to-[#00FF7F]

Mint Chocolate

#98FB98, #3CB371, #2E8B57

bg-gradient-to-r from-[#98FB98] via-[#3CB371] to-[#2E8B57]

Neon Nights

#FF1493, #00FFFF, #ADFF2F

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