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.

Gray Gradients

Afternoon

#000C40, #607D8B

bg-gradient-to-r from-[#000C40] to-[#607D8B]

Blu

#00416A, #E4E5E6

bg-gradient-to-r from-[#00416A] to-[#E4E5E6]

Veer Black

#F7F8F8, #ACBB78

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

Bupe

#00416A, #E4E5E6

bg-gradient-to-r from-[#00416A] to-[#E4E5E6]

Royal Blue

#536976, #292E49

bg-gradient-to-r from-[#536976] to-[#292E49]

Royal Blue + Petrol

#BBD2C5, #536976, #292E49

bg-gradient-to-r from-[#BBD2C5] via-[#536976] to-[#292E49]

Petrol

#BBD2C5, #536976

bg-gradient-to-r from-[#BBD2C5] to-[#536976]

Horizon

#003973, #E5E5BE

bg-gradient-to-r from-[#003973] to-[#E5E5BE]

Frozen

#403B4A, #E7E9BB

bg-gradient-to-r from-[#403B4A] to-[#E7E9BB]

Mirage

#16222A, #3A6073

bg-gradient-to-r from-[#16222A] to-[#3A6073]

Steel Gray

#1F1C2C, #928DAB

bg-gradient-to-r from-[#1F1C2C] to-[#928DAB]

Bora Bora

#2BC0E4, #EAECC6

bg-gradient-to-r from-[#2BC0E4] to-[#EAECC6]

Mystic

#757F9A, #D7DDE8

bg-gradient-to-r from-[#757F9A] to-[#D7DDE8]

Midnight City

#232526, #414345

bg-gradient-to-r from-[#232526] to-[#414345]

Titanium

#283048, #859398

bg-gradient-to-r from-[#283048] to-[#859398]

Clouds

#ECE9E6, #FFFFFF

bg-gradient-to-r from-[#ECE9E6] to-[#FFFFFF]

Vasily

#e9d362, #333333

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

Sirius Tamed

#EFEFBB, #D4D3DD

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

Misty Meadow

#215f00, #e4e4d9

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

Moor

#616161, #9bc5c3

bg-gradient-to-r from-[#616161] to-[#9bc5c3]

Forever Lost

#5D4157, #A8CABA

bg-gradient-to-r from-[#5D4157] to-[#A8CABA]

Winter

#E6DADA, #274046

bg-gradient-to-r from-[#E6DADA] to-[#274046]

Ash

#606c88, #3f4c6b

bg-gradient-to-r from-[#606c88] to-[#3f4c6b]

Cheer Up Emo Kid

#556270, #FF6B6B

bg-gradient-to-r from-[#556270] to-[#FF6B6B]

ServQuick

#485563, #29323c

bg-gradient-to-r from-[#485563] to-[#29323c]

Metallic Toad

#abbaab, #ffffff

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

Between The Clouds

#73C8A9, #373B44

bg-gradient-to-r from-[#73C8A9] to-[#373B44]

Talking To Mice Elf

#948E99, #2E1437

bg-gradient-to-r from-[#948E99] to-[#2E1437]

Portrait

#8e9eab, #eef2f3

bg-gradient-to-r from-[#8e9eab] to-[#eef2f3]

Green to dark

#6A9113, #141517

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

Curiosity blue

#525252, #3d72b4

bg-gradient-to-r from-[#525252] to-[#3d72b4]

Lizard

#304352, #d7d2cc

bg-gradient-to-r from-[#304352] to-[#d7d2cc]

Between Night and Day

#2c3e50, #3498db

bg-gradient-to-r from-[#2c3e50] to-[#3498db]

Poncho

#403A3E, #BE5869

bg-gradient-to-r from-[#403A3E] to-[#BE5869]

Nighthawk

#2980b9, #2c3e50

bg-gradient-to-r from-[#2980b9] to-[#2c3e50]

Dark Skies

#4B79A1, #283E51

bg-gradient-to-r from-[#4B79A1] to-[#283E51]

Deep Space

#000000, #434343

bg-gradient-to-r from-[#000000] to-[#434343]

Decent

#4CA1AF, #C4E0E5

bg-gradient-to-r from-[#4CA1AF] to-[#C4E0E5]

Colors Of Sky

#E0EAFC, #CFDEF3

bg-gradient-to-r from-[#E0EAFC] to-[#CFDEF3]

Bright Vault

#00d2ff, #928DAB

bg-gradient-to-r from-[#00d2ff] to-[#928DAB]

Dusk

#2C3E50, #FD746C

bg-gradient-to-r from-[#2C3E50] to-[#FD746C]

Platinum Sheen

#e5e5e5, #cfcfcf, #f7f7f7

bg-gradient-to-r from-[#e5e5e5] via-[#cfcfcf] to-[#f7f7f7]

Steel Mist

#d7d7d7, #b0b0b0, #e9e9e9

bg-gradient-to-r from-[#d7d7d7] via-[#b0b0b0] to-[#e9e9e9]

Lunar Glow

#f2f2f2, #d4d4d4, #fafafa

bg-gradient-to-r from-[#f2f2f2] via-[#d4d4d4] to-[#fafafa]

Chrome Gleam

#d9d9d9, #bfbfbf, #e6e6e6

bg-gradient-to-r from-[#d9d9d9] via-[#bfbfbf] to-[#e6e6e6]

Frosted Platinum

#ececec, #d0d0d0, #f5f5f5

bg-gradient-to-r from-[#ececec] via-[#d0d0d0] to-[#f5f5f5]

Mercury Veil

#f1f1f1, #c4c4c4, #eaeaea

bg-gradient-to-r from-[#f1f1f1] via-[#c4c4c4] to-[#eaeaea]

Titanium Mist

#dcdcdc, #a6a6a6, #e3e3e3

bg-gradient-to-r from-[#dcdcdc] via-[#a6a6a6] to-[#e3e3e3]

Palladium Glow

#ededed, #b8b8b8, #f8f8f8

bg-gradient-to-r from-[#ededed] via-[#b8b8b8] to-[#f8f8f8]