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.

Black Gradients

Afternoon

#000C40, #607D8B

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

Brahmos

#780206, #061161

bg-gradient-to-r from-[#780206] to-[#061161]

Pinot Noir

#4b6cb7, #182848

bg-gradient-to-r from-[#4b6cb7] to-[#182848]

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]

Deep Ocean

#000080, #191970, #4169E1

bg-gradient-to-r from-[#000080] via-[#191970] to-[#4169E1]

Omolon

#091E3A, #2F80ED, #2D9EE0

bg-gradient-to-r from-[#091E3A] via-[#2F80ED] to-[#2D9EE0]

Bhopal

#9400D3, #4B0082

bg-gradient-to-r from-[#9400D3] to-[#4B0082]

The Sky And The Sea

#F7941E, #004E8F

bg-gradient-to-r from-[#F7941E] to-[#004E8F]

From Ice To Fire

#72C6EF, #004E8F

bg-gradient-to-r from-[#72C6EF] to-[#004E8F]

Purple Dream

#bf5ae0, #a811da

bg-gradient-to-r from-[#bf5ae0] to-[#a811da]

Blu

#00416A, #E4E5E6

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

Veer Black

#F7F8F8, #ACBB78

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

Ujjwal

#334d50, #cbcaa5

bg-gradient-to-r from-[#334d50] to-[#cbcaa5]

Lunada

#5433FF, #20BDFF, #A5FECB

bg-gradient-to-r from-[#5433FF] via-[#20BDFF] to-[#A5FECB]

Reaqua

#799F0C, #ACBB78

bg-gradient-to-r from-[#799F0C] 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]

Copper

#B79891, #94716B

bg-gradient-to-r from-[#B79891] to-[#94716B]

Petrol

#BBD2C5, #536976

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

Sky

#076585, #fff

bg-gradient-to-r from-[#076585] to-[#fff]

Sel

#00467F, #A5CC82

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

Skyline

#1488CC, #2B32B2

bg-gradient-to-r from-[#1488CC] to-[#2B32B2]

Purple Love

#cc2b5e, #753a88

bg-gradient-to-r from-[#cc2b5e] to-[#753a88]

Sea Blue

#2b5876, #4e4376

bg-gradient-to-r from-[#2b5876] to-[#4e4376]

Nimvelo

#314755, #26a0da

bg-gradient-to-r from-[#314755] to-[#26a0da]

YouTube

#e52d27, #b31217

bg-gradient-to-r from-[#e52d27] to-[#b31217]

Cool Brown

#603813, #b29f94

bg-gradient-to-r from-[#603813] to-[#b29f94]

Intuitive Purple

#DA22FF, #9733EE

bg-gradient-to-r from-[#DA22FF] to-[#9733EE]

Emerald Water

#348F50, #56B4D3

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

Horizon

#003973, #E5E5BE

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

Frozen

#403B4A, #E7E9BB

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

Aubergine

#AA076B, #61045F

bg-gradient-to-r from-[#AA076B] to-[#61045F]

Aqua Marine

#1A2980, #26D0CE

bg-gradient-to-r from-[#1A2980] to-[#26D0CE]

Purple Paradise

#1D2B64, #F8CDDA

bg-gradient-to-r from-[#1D2B64] to-[#F8CDDA]

Sea Weed

#4CB8C4, #3CD3AD

bg-gradient-to-r from-[#4CB8C4] to-[#3CD3AD]

Mojito

#1D976C, #93F9B9

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

Mirage

#16222A, #3A6073

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

Steel Gray

#1F1C2C, #928DAB

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

Pune

#614385, #516395

bg-gradient-to-r from-[#614385] to-[#516395]

Venice Blue

#085078, #85D8CE

bg-gradient-to-r from-[#085078] to-[#85D8CE]

Moss

#134E5E, #71B280

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

Shroom Haze

#5C258D, #4389A2

bg-gradient-to-r from-[#5C258D] to-[#4389A2]

Mystic

#757F9A, #D7DDE8

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

Midnight City

#232526, #414345

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

Opa

#3D7EAA, #FFE47A

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

Titanium

#283048, #859398

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

Mantle

#24C6DC, #514A9D

bg-gradient-to-r from-[#24C6DC] to-[#514A9D]

Dracula

#DC2424, #4A569D

bg-gradient-to-r from-[#DC2424] to-[#4A569D]

Interstellar

#7474BF, #348AC7

bg-gradient-to-r from-[#7474BF] to-[#348AC7]

Calm Darya

#5f2c82, #49a09d

bg-gradient-to-r from-[#5f2c82] to-[#49a09d]

Influenza

#C04848, #480048

bg-gradient-to-r from-[#C04848] to-[#480048]

Army

#414d0b, #727a17

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

Namn

#a73737, #7a2828

bg-gradient-to-r from-[#a73737] to-[#7a2828]

Vasily

#e9d362, #333333

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

Petrichor

#666600, #999966

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

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]

Reef

#00d2ff, #3a7bd5

bg-gradient-to-r from-[#00d2ff] to-[#3a7bd5]

The Strain

#870000, #190A05

bg-gradient-to-r from-[#870000] to-[#190A05]

Earthly

#649173, #DBD5A4

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

Ash

#606c88, #3f4c6b

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

Cherryblossoms

#FBD3E9, #BB377D

bg-gradient-to-r from-[#FBD3E9] to-[#BB377D]

Parklife

#ADD100, #7B920A

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

Starfall

#F0C27B, #4B1248

bg-gradient-to-r from-[#F0C27B] to-[#4B1248]

Red Mist

#000000, #e74c3c

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

Amethyst

#9D50BB, #6E48AA

bg-gradient-to-r from-[#9D50BB] to-[#6E48AA]

Cheer Up Emo Kid

#556270, #FF6B6B

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

Behongo

#52c234, #061700

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

ServQuick

#485563, #29323c

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

Between The Clouds

#73C8A9, #373B44

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

Crazy Orange I

#D38312, #A83279

bg-gradient-to-r from-[#D38312] to-[#A83279]

Hersheys

#1e130c, #9a8478

bg-gradient-to-r from-[#1e130c] to-[#9a8478]

Talking To Mice Elf

#948E99, #2E1437

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

Purple Bliss

#360033, #0b8793

bg-gradient-to-r from-[#360033] to-[#0b8793]

Predawn

#FFA17F, #00223E

bg-gradient-to-r from-[#FFA17F] to-[#00223E]

Endless River

#43cea2, #185a9d

bg-gradient-to-r from-[#43cea2] to-[#185a9d]

Twitch

#6441A5, #2a0845

bg-gradient-to-r from-[#6441A5] to-[#2a0845]

Instagram

#833ab4, #fd1d1d, #fcb045

bg-gradient-to-r from-[#833ab4] via-[#fd1d1d] to-[#fcb045]

Flickr

#ff0084, #33001b

bg-gradient-to-r from-[#ff0084] to-[#33001b]

Vine

#00bf8f, #001510

bg-gradient-to-r from-[#00bf8f] to-[#001510]

Turquoise flow

#136a8a, #267871

bg-gradient-to-r from-[#136a8a] to-[#267871]

Portrait

#8e9eab, #eef2f3

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

Virgin Bihar

#7b4397, #dc2430

bg-gradient-to-r from-[#7b4397] to-[#dc2430]

Koko Caramel

#D1913C, #FFD194

bg-gradient-to-r from-[#D1913C] to-[#FFD194]

Fresh Turboscent

#F1F2B5, #135058

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

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]

Dark Knight

#BA8B02, #181818

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

Lizard

#304352, #d7d2cc

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

Sage Persuasion

#CCCCB2, #757519

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

Between Night and Day

#2c3e50, #3498db

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

Clear Sky

#005C97, #363795

bg-gradient-to-r from-[#005C97] to-[#363795]

Deep Purple

#673AB7, #512DA8

bg-gradient-to-r from-[#673AB7] to-[#512DA8]

Netflix

#8E0E00, #1F1C18

bg-gradient-to-r from-[#8E0E00] to-[#1F1C18]

Light Orange

#FFB75E, #ED8F03

bg-gradient-to-r from-[#FFB75E] to-[#ED8F03]

Poncho

#403A3E, #BE5869

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

Blush

#B24592, #F15F79

bg-gradient-to-r from-[#B24592] to-[#F15F79]

Purplin

#6a3093, #a044ff

bg-gradient-to-r from-[#6a3093] to-[#a044ff]

Pizelex

#114357, #F29492

bg-gradient-to-r from-[#114357] to-[#F29492]

Joomla

#1e3c72, #2a5298

bg-gradient-to-r from-[#1e3c72] to-[#2a5298]

Christmas

#2F7336, #AA3A38

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

Rajput Vikings

#5614B0, #DBD65C

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

Ganga Dolphins

#4DA0B0, #D39D38

bg-gradient-to-r from-[#4DA0B0] to-[#D39D38]

Forest

#5A3F37, #2C7744

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

Nighthawk

#2980b9, #2c3e50

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

Suzy

#834d9b, #d04ed6

bg-gradient-to-r from-[#834d9b] to-[#d04ed6]

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]

Purple White

#BA5370, #F4E2D8

bg-gradient-to-r from-[#BA5370] to-[#F4E2D8]

Gwalior

#a80077, #66ff00

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

Red Ocean

#1D4350, #A43931

bg-gradient-to-r from-[#1D4350] to-[#A43931]

Transfile

#16BFFD, #CB3066

bg-gradient-to-r from-[#16BFFD] to-[#CB3066]

Solid Vault

#3a7bd5, #3a6073

bg-gradient-to-r from-[#3a7bd5] to-[#3a6073]

Sunset

#0B486B, #F56217

bg-gradient-to-r from-[#0B486B] to-[#F56217]

Grapefruit Sunset

#e96443, #904e95

bg-gradient-to-r from-[#e96443] to-[#904e95]

Deep Sea Space

#2C3E50, #4CA1AF

bg-gradient-to-r from-[#2C3E50] to-[#4CA1AF]

Dusk

#2C3E50, #FD746C

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

Minimal Red

#F00000, #DC281E

bg-gradient-to-r from-[#F00000] to-[#DC281E]

Royal

#141E30, #243B55

bg-gradient-to-r from-[#141E30] to-[#243B55]

Mauve

#42275a, #734b6d

bg-gradient-to-r from-[#42275a] to-[#734b6d]

Ocean Depths

#006A6B, #0891B2, #33D4FF

bg-gradient-to-r from-[#006A6B] via-[#0891B2] to-[#33D4FF]

Forest Mist

#134E5E, #71B280, #A8E6CF

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

Cosmic Dust

#2E0249, #570A57, #A91079

bg-gradient-to-r from-[#2E0249] via-[#570A57] to-[#A91079]

Velvet Dreams

#8E2DE2, #4A00E0, #FF006E

bg-gradient-to-r from-[#8E2DE2] via-[#4A00E0] to-[#FF006E]

Midnight Blue

#191654, #43C6AC, #F8FFAE

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

Sunset Orange

#FF8C00, #FF7F50, #FF6347

bg-gradient-to-r from-[#FF8C00] via-[#FF7F50] to-[#FF6347]

Titanium Mist

#dcdcdc, #a6a6a6, #e3e3e3

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