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.

Blue Gradients

Bluelagoo

#0052D4, #4364F7, #6FB1FC

bg-gradient-to-r from-[#0052D4] via-[#4364F7] to-[#6FB1FC]

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]

Combi

#00416A, #799F0C, #FFE000

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

Superman

#0099F7, #F11712

bg-gradient-to-r from-[#0099F7] to-[#F11712]

Deep Ocean

#000080, #191970, #4169E1

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

Ocean Breeze

#a1c4fd, #ffffff

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

Omolon

#091E3A, #2F80ED, #2D9EE0

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

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]

Blue & Orange

#FD8112, #0085CA

bg-gradient-to-r from-[#FD8112] to-[#0085CA]

Blu

#00416A, #E4E5E6

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

Lunada

#5433FF, #20BDFF, #A5FECB

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

Bupe

#00416A, #E4E5E6

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

Windy

#acb6e5, #86fde8

bg-gradient-to-r from-[#acb6e5] to-[#86fde8]

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]

Sel

#00467F, #A5CC82

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

Skyline

#1488CC, #2B32B2

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

Sexy Blue

#2193b0, #6dd5ed

bg-gradient-to-r from-[#2193b0] to-[#6dd5ed]

Nimvelo

#314755, #26a0da

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

Hazel

#77A1D3, #79CBCA, #E684AE

bg-gradient-to-r from-[#77A1D3] via-[#79CBCA] to-[#E684AE]

Noon to Dusk

#ff6e7f, #bfe9ff

bg-gradient-to-r from-[#ff6e7f] to-[#bfe9ff]

Emerald Water

#348F50, #56B4D3

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

Monte Carlo

#CC95C0, #DBD4B4, #7AA1D2

bg-gradient-to-r from-[#CC95C0] via-[#DBD4B4] to-[#7AA1D2]

Horizon

#003973, #E5E5BE

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

Rose Water

#E55D87, #5FC3E4

bg-gradient-to-r from-[#E55D87] to-[#5FC3E4]

Aqua Marine

#1A2980, #26D0CE

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

Purple Paradise

#1D2B64, #F8CDDA

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

Stripe

#1FA2FF, #12D8FA, #A6FFCB

bg-gradient-to-r from-[#1FA2FF] via-[#12D8FA] to-[#A6FFCB]

Mirage

#16222A, #3A6073

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

Pune

#614385, #516395

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

Electric Violet

#4776E6, #8E54E9

bg-gradient-to-r from-[#4776E6] to-[#8E54E9]

Shroom Haze

#5C258D, #4389A2

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

Opa

#3D7EAA, #FFE47A

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

Dracula

#DC2424, #4A569D

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

Moonrise

#DAE2F8, #D6A4A4

bg-gradient-to-r from-[#DAE2F8] to-[#D6A4A4]

Interstellar

#7474BF, #348AC7

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

Reef

#00d2ff, #3a7bd5

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

Dirty Fog

#B993D6, #8CA6DB

bg-gradient-to-r from-[#B993D6] to-[#8CA6DB]

Ash

#606c88, #3f4c6b

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

Shore

#70e1f5, #ffd194

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

Facebook Messenger

#00c6ff, #0072ff

bg-gradient-to-r from-[#00c6ff] to-[#0072ff]

Friday

#83a4d4, #b6fbff

bg-gradient-to-r from-[#83a4d4] to-[#b6fbff]

Predawn

#FFA17F, #00223E

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

Endless River

#43cea2, #185a9d

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

Atlas

#FEAC5E, #C779D0, #4BC0C8

bg-gradient-to-r from-[#FEAC5E] via-[#C779D0] to-[#4BC0C8]

Ukraine

#004FF9, #FFF94C

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

Curiosity blue

#525252, #3d72b4

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

Between Night and Day

#2c3e50, #3498db

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

Timber

#fc00ff, #00dbde

bg-gradient-to-r from-[#fc00ff] to-[#00dbde]

Clear Sky

#005C97, #363795

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

Green and Blue

#c2e59c, #64b3f4

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

Inbox

#457fca, #5691c8

bg-gradient-to-r from-[#457fca] to-[#5691c8]

Joomla

#1e3c72, #2a5298

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

Nighthawk

#2980b9, #2c3e50

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

Dark Skies

#4B79A1, #283E51

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

Colors Of Sky

#E0EAFC, #CFDEF3

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

Red Ocean

#1D4350, #A43931

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

Politics

#2196f3, #f44336

bg-gradient-to-r from-[#2196f3] to-[#f44336]

Solid Vault

#3a7bd5, #3a6073

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

Sunset

#0B486B, #F56217

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

Deep Sea Space

#2C3E50, #4CA1AF

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

Royal

#141E30, #243B55

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

Neon Cyberpunk

#FF006E, #8338EC, #3A86FF

bg-gradient-to-r from-[#FF006E] via-[#8338EC] to-[#3A86FF]

Ocean Depths

#006A6B, #0891B2, #33D4FF

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

Purple Haze

#667eea, #764ba2, #f093fb

bg-gradient-to-r from-[#667eea] via-[#764ba2] to-[#f093fb]

Tropical Paradise

#00B4DB, #0083B0, #00A8CC

bg-gradient-to-r from-[#00B4DB] via-[#0083B0] to-[#00A8CC]

Midnight Blue

#191654, #43C6AC, #F8FFAE

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

Steel Blue

#4682B4, #5F9EA0, #87CEEB

bg-gradient-to-r from-[#4682B4] via-[#5F9EA0] to-[#87CEEB]

Glacier Ice

#F0F8FF, #E0FFFF, #B0E0E6

bg-gradient-to-r from-[#F0F8FF] via-[#E0FFFF] to-[#B0E0E6]