Gradient Schemes
Curated beautiful gradient schemes to provide rich gradient inspiration for your design projects. Including 70 carefully selected gradient combinations.
Total 70 gradient schemes • Featured 21 gradients
Usage Guide
CSS Copy
Click any gradient card to copy its CSS code to clipboard
Gradient Application
Each gradient scheme is labeled with use cases, choose according to project needs
Tag Description
Gradients are categorized by tone, season, emotion and other dimensions
Featured Gradients
Gradients with 'Featured' tag are carefully selected high-quality combinations
Filters
RedOrangeYellowGreenBluePurplePinkGrayMultiNeutral
WarmSunsetVibrantGentleRomanticSpringBoldDramaticElegantLuxurySweetBrightFreshDarkTropicalSummerAutumnNaturalCozySoftCitrusMetallicGoldenSunnyHoneyElectricNeonForestMintCalmOceanCoolSkyDreamyWinterLavenderCherryModernMinimalCleanRainbowColorfulCosmic
Click gradients to copy CSS code
Recommended Gradients
FeaturedFeatured
CSS Copy
Red3 colors
WarmSunsetVibrant
Featured
CSS Copy
Red2 colors
VibrantBoldDramatic
Featured
CSS Copy
Red3 colors
DarkLuxuryElegant
Featured
CSS Copy
Orange3 colors
AutumnNaturalCozy
Featured
CSS Copy
Orange3 colors
WarmLuxury
Featured
CSS Copy
Yellow2 colors
SunsetDramaticGolden
Featured
CSS Copy
Yellow2 colors
ElectricVibrantNeon
Featured
CSS Copy
Green2 colors
NaturalFreshForest
Featured
CSS Copy
Green2 colors
CoolNaturalCalm
Featured
CSS Copy
Blue2 colors
OceanCalmCool
Featured
CSS Copy
Blue2 colors
ElectricVibrantNeon
Featured
CSS Copy
Purple2 colors
ElegantLuxuryCool
Featured
CSS Copy
Purple2 colors
ElegantRomanticSoft
Featured
CSS Copy
Pink2 colors
RomanticGentleSoft
Featured
CSS Copy
Pink2 colors
BoldVibrantDramatic
Featured
CSS Copy
Gray2 colors
MinimalCleanSoft
Featured
CSS Copy
Gray2 colors
DarkModernBold
Featured
CSS Copy
Multi7 colors
RainbowColorfulVibrant
Featured
CSS Copy
Multi2 colors
CosmicBoldDramatic
Featured
CSS Copy
Multi4 colors
CosmicVibrantBold
Featured
CSS Copy
Neutral3 colors
ElegantMinimalSoft
All Gradients
CSS Copy
Red2 colors
GentleRomanticSpring
CSS Copy
Red2 colors
BoldDramaticElegant
CSS Copy
Red2 colors
WarmElegantLuxury
CSS Copy
Red2 colors
SweetBrightFresh
CSS Copy
Orange2 colors
TropicalWarmSummer
CSS Copy
Orange2 colors
SoftSweetGentle
CSS Copy
Orange2 colors
VibrantCitrusBright
CSS Copy
Orange2 colors
MetallicSunsetWarm
CSS Copy
Orange2 colors
BoldBrightTropical
CSS Copy
Yellow2 colors
FreshCitrusBright
CSS Copy
Yellow2 colors
BrightSunnyVibrant
CSS Copy
Yellow2 colors
SoftGentleBright
CSS Copy
Yellow2 colors
HoneySweetGolden
CSS Copy
Yellow3 colors
SoftSweetGentle
CSS Copy
Green2 colors
FreshMintCalm
CSS Copy
Green2 colors
OceanCalmNatural
CSS Copy
Green3 colors
VibrantTropicalForest
CSS Copy
Green2 colors
CalmNaturalSoft
CSS Copy
Green2 colors
BrightCitrusFresh
CSS Copy
Blue3 colors
SkyCalmDreamy
CSS Copy
Blue2 colors
DarkElegantCool
CSS Copy
Blue2 colors
CoolDarkWinter
CSS Copy
Blue2 colors
SkyBrightCool
CSS Copy
Blue3 colors
DarkOceanElegant
CSS Copy
Purple2 colors
LavenderGentleDreamy
CSS Copy
Purple2 colors
LuxuryElegantBold
CSS Copy
Purple3 colors
DramaticBoldVibrant
CSS Copy
Purple2 colors
DarkLuxuryElegant
CSS Copy
Purple2 colors
DarkDramaticLuxury
CSS Copy
Pink2 colors
SweetSoftGentle
CSS Copy
Pink2 colors
BrightVibrantSweet
CSS Copy
Pink3 colors
CherrySoftSpring
CSS Copy
Pink2 colors
VibrantBoldBright
CSS Copy
Pink2 colors
SunsetWarmSoft
CSS Copy
Gray2 colors
DramaticModernCool
CSS Copy
Gray2 colors
ElegantModernDark
CSS Copy
Gray3 colors
SoftElegantMinimal
CSS Copy
Gray2 colors
NaturalModernCool
CSS Copy
Gray2 colors
MetallicElegantLuxury
CSS Copy
Multi3 colors
NeonVibrantElectric
CSS Copy
Multi3 colors
ColorfulDreamyCool
CSS Copy
Multi4 colors
TropicalColorfulSummer
CSS Copy
Multi5 colors
SunsetColorfulVibrant
CSS Copy
Neutral2 colors
WarmCozySoft
CSS Copy
Neutral2 colors
CoolCalmMinimal
CSS Copy
Neutral2 colors
CozySoftWarm
CSS Copy
Neutral3 colors
NaturalWarmSoft
CSS Copy
Neutral2 colors
MinimalCleanSoft
CSS Copy
Neutral2 colors
NaturalWarmCozy