CSS Gradient Library

Pick a ready-made gradient or build your own with up to six color stops. Copy the CSS, or download a gradient image in any size up to 4096 px — individually or as a batch ZIP.

All gradients

• SunsetLinear · 2 colors
• Ocean BreezeLinear · 2 colors
• AuroraLinear · 2 colors
• Midnight CityLinear · 2 colors
• Peach SorbetLinear · 2 colors
• Cotton CandyLinear · 2 colors
• MojitoLinear · 2 colors
• Royal PurpleLinear · 2 colors
• Lemon TwistLinear · 2 colors
• Cool SkyLinear · 3 colors
• Mango PulpLinear · 2 colors
• Deep SeaLinear · 3 colors
• Berry SmoothieLinear · 3 colors
• Fresh MintLinear · 2 colors
• Lavender MistLinear · 2 colors
• Evening SunshineLinear · 2 colors
• Tropical PunchLinear · 2 colors
• Forest CanopyLinear · 2 colors
• Steel GrayLinear · 2 colors
• Golden HourLinear · 2 colors
• Arctic IceLinear · 2 colors
• Neon LifeLinear · 2 colors
• Rose WaterLinear · 2 colors
• Candy ShopLinear · 2 colors
• TwilightLinear · 3 colors
• Citrus PeelLinear · 2 colors
• Blue LagoonLinear · 2 colors
• Warm FlameLinear · 2 colors
• Night FadeLinear · 2 colors
• SpotlightRadial · 2 colors
• Sun GlowRadial · 3 colors
• Deep SpaceRadial · 2 colors
• Pastel RadialRadial · 3 colors
• Rainbow WheelConic · 7 colors
• Color Wheel SoftConic · 6 colors
• Red to OrangeLinear · 2 colors
• Deep Red to OrangeLinear · 2 colors
• Red to CyanLinear · 2 colors
• Deep Red to CyanLinear · 2 colors
• Scarlet to TangerineLinear · 2 colors
• Deep Scarlet to TangerineLinear · 2 colors
• Scarlet to LagoonLinear · 2 colors
• Deep Scarlet to LagoonLinear · 2 colors
• Vermilion to AmberLinear · 2 colors
• Deep Vermilion to AmberLinear · 2 colors
• Vermilion to PeacockLinear · 2 colors
• Deep Vermilion to PeacockLinear · 2 colors
• Cinnabar to MarigoldLinear · 2 colors
• Deep Cinnabar to MarigoldLinear · 2 colors
• Cinnabar to CapriLinear · 2 colors
• Deep Cinnabar to CapriLinear · 2 colors
• Persimmon to GoldLinear · 2 colors
• Deep Persimmon to GoldLinear · 2 colors
• Persimmon to AzureLinear · 2 colors
• Deep Persimmon to AzureLinear · 2 colors
• Orange to YellowLinear · 2 colors
• Deep Orange to YellowLinear · 2 colors
• Orange to CeruleanLinear · 2 colors
• Deep Orange to CeruleanLinear · 2 colors
• Tangerine to CitronLinear · 2 colors

Looking for solid colors?

Browse the color shades library →