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.

Purple Gradients

Bhopal

#9400D3, #4B0082

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

Purple

#c84e89, #F15F79

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

Purple Dream

#bf5ae0, #a811da

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

Anamnisar

#9796f0, #fbc7d4

bg-gradient-to-r from-[#9796f0] to-[#fbc7d4]

Purple Love

#cc2b5e, #753a88

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

Intuitive Purple

#DA22FF, #9733EE

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

Aubergine

#AA076B, #61045F

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

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]

Mystic

#757F9A, #D7DDE8

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

Mantle

#24C6DC, #514A9D

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

Calm Darya

#5f2c82, #49a09d

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

Almost

#ddd6f3, #faaca8

bg-gradient-to-r from-[#ddd6f3] to-[#faaca8]

Dirty Fog

#B993D6, #8CA6DB

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

Starfall

#F0C27B, #4B1248

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

Amethyst

#9D50BB, #6E48AA

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

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]

Twitch

#6441A5, #2a0845

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

Atlas

#FEAC5E, #C779D0, #4BC0C8

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

Instagram

#833ab4, #fd1d1d, #fcb045

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

Virgin Bihar

#7b4397, #dc2430

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

Timber

#fc00ff, #00dbde

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

Deep Purple

#673AB7, #512DA8

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

Purplin

#6a3093, #a044ff

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

Rajput Vikings

#5614B0, #DBD65C

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

Suzy

#834d9b, #d04ed6

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

Grapefruit Sunset

#e96443, #904e95

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

Mauve

#42275a, #734b6d

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

Neon Cyberpunk

#FF006E, #8338EC, #3A86FF

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

Purple Haze

#667eea, #764ba2, #f093fb

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

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]

Lavender Fields

#E6E6FA, #DDA0DD, #9370DB

bg-gradient-to-r from-[#E6E6FA] via-[#DDA0DD] to-[#9370DB]