CSS Gradient Color Palettes
Curated gradient color combinations that work — with CSS code you can copy directly into your project.
Curated palettes
Cool blues and purples — clean, modern, tech-forward
background: linear-gradient(135deg, #0ea5e9, #06b6d4, #8b5cf6);Warm oranges, reds, and pinks — energetic and bold
background: linear-gradient(135deg, #f97316, #ef4444, #ec4899);Natural greens and teals — calm and organic
background: linear-gradient(135deg, #22c55e, #10b981, #14b8a6);Deep indigos and blues — futuristic and expansive
background: linear-gradient(135deg, #6366f1, #8b5cf6, #0ea5e9);Vivid pinks and purples — playful and vibrant
background: linear-gradient(135deg, #ec4899, #f43f5e, #a855f7);Deep ocean blues — professional and trustworthy
background: linear-gradient(135deg, #0ea5e9, #0284c7, #0f172a);Choosing gradient colors
Analogous colors
Colors adjacent on the color wheel (e.g. blue → cyan → teal) produce smooth, harmonious gradients. Best for backgrounds and subtle UI elements.
Complementary colors
Opposite colors (e.g. purple → yellow) create high-contrast, energetic gradients. Best for CTAs, headers, and attention-grabbing moments. Use sparingly — they're visually intense.
Triadic mid-stops
Adding a via-* color from a third point on the color wheel (e.g. blue → pink → orange) creates rich, complex gradients without muddy transitions.
Avoid complementary transitions through grey
Linear interpolation between complementary colors passes through grey in sRGB space. Use OKLCH color space interpolation for vibrant transitions — Gradient Studio handles this automatically.
Browse 10,000+ gradient palettes
Gradient Studio includes a curated library of over 10,000 color palettes ready to apply to any gradient.
Open Gradient Studio