More Color Tools

Gradient Colors

Curated CSS gradient library with smart filters, brightness and saturation sorting, component previews and one-click code export for modern interfaces.

Find the perfect gradient for your UI
Filter by vibe, sort by brightness or saturation, and copy production-ready CSS snippets in one click.
477 gradients
Gradient showcase
Click copy to grab the CSS snippet or explore the color stops for each preset.

Bold Cool #1

Bold · Cool · Dark • 5 stops

#f09433#e6683c#dc2743#cc2366#bc1888
Avg brightness 22%Avg saturation 77%

Bold Cool #2

Bold · Cool • 2 stops

#ffc107#ff69b4
Avg brightness 47%Avg saturation 100%

Cool Bold #3

Cool • 2 stops

#c5cae9#87ceeb
Avg brightness 58%Avg saturation 58%

Bold Light #4

Bold · Light • 2 stops

#f8e231#c7f464
Avg brightness 76%Avg saturation 90%

Bold Cool #5

Bold · Cool • 2 stops

#2196f3#64b5f6
Avg brightness 36%Avg saturation 89%

Bold Warm #6

Bold · Warm • 2 stops

#e91e63#ffc0cb
Avg brightness 41%Avg saturation 91%

Neutral Light #7

Neutral • 2 stops

#4caf50#8bc34a
Avg brightness 39%Avg saturation 45%

Bold Dark #8

Bold · Dark • 2 stops

#9c27b0#e040fb
Avg brightness 19%Avg saturation 80%

Cool Dark #9

Cool · Dark • 2 stops

#1976d2#455a64
Avg brightness 14%Avg saturation 49%

Bold Warm #10

Bold · Warm • 2 stops

#f2c464#ffd7be
Avg brightness 66%Avg saturation 92%

Bold Cool #11

Bold · Cool · Dark • 2 stops

#1a237e#4cd137
Avg brightness 25%Avg saturation 64%

Bold Light #12

Bold · Light • 2 stops

#c9e4ca#f8e231
Avg brightness 73%Avg saturation 63%

Bold Warm #13

Bold · Warm · Dark • 2 stops

#8e44ad#ff69b4
Avg brightness 24%Avg saturation 72%

Bold Bold #14

Bold • 2 stops

#2ecc71#c7f464
Avg brightness 61%Avg saturation 75%

Bold Cool #15

Bold · Cool • 2 stops

#64b5f6#87ceeb
Avg brightness 49%Avg saturation 80%

Bold Cool #16

Bold · Cool • 2 stops

#ffc0cb#ffd7be
Avg brightness 68%Avg saturation 100%

Bold Bold #17

Bold • 2 stops

#e040fb#c5cae9
Avg brightness 43%Avg saturation 70%

Bold Bold #18

Bold • 2 stops

#4cd137#f2c464
Avg brightness 53%Avg saturation 74%

Cool Dark #19

Cool · Dark • 2 stops

#455a64#1a237e
Avg brightness 6%Avg saturation 42%

Bold Light #20

Bold · Light • 2 stops

#c7f464#f8e231
Avg brightness 76%Avg saturation 90%

Cool Light #21

Cool • 2 stops

#87ceeb#c9e4ca
Avg brightness 64%Avg saturation 52%

Bold Cool #22

Bold · Cool • 2 stops

#ffb6c1#ff9999
Avg brightness 52%Avg saturation 100%

Bold Cool #23

Bold · Cool · Light • 2 stops

#98fb98#b0e0e6
Avg brightness 73%Avg saturation 72%

Bold Cool #24

Bold · Cool · Light • 2 stops

#afeeee#fdfd96
Avg brightness 85%Avg saturation 81%

Gradient library FAQs

Currently showing 477 gradients based on your filters.