Why we built this
Every designer and developer has been here: you need the exact Instagram gradient, or Spotify’s signature green-to-black fade, and you end up digging through old Dribbble shots, eyeballing colors from screenshots, or guessing hex codes that never quite match.
We got tired of that. So we built The Gradients — a single, searchable reference for the gradients used by the world’s biggest brands, plus a growing library of curated, seasonal, and UI gradients for everyday design work.
What we do
The Gradients is a free library of 400+ gradients. For every gradient, you get:
- The exact CSS, ready to paste
- A Tailwind utility class
- A Figma token in JSON format
- Hex codes for every color stop
No signup. No paywall. No ads. Just copy what you need and get back to work.
We also built two tools for when the library doesn’t have exactly what you’re picturing:
- Gradient Generator — pick colors, set the angle, export the code
- Mesh Gradient Generator — drag-and-drop color points for organic, modern mesh gradients, with PNG export
How the library is built
Gradients are organized into four categories:
- Brand — gradients from real companies, sourced from their public brand assets and marketing materials
- Curated — designer-picked palettes that don’t belong to any one brand
- Seasonal — gradients for holidays and seasons
- UI — gradients built for specific interface use cases like buttons, badges, and dark mode
Anyone can submit a gradient through our submission form, and we review and publish the ones that fit.
A note on brands
We are an independent reference site. We are not affiliated with, sponsored by, or endorsed by any of the brands whose gradients appear here. Brand names and trademarks belong to their respective owners — we reference them only to help you find the right colors. Read more in our Terms of Use.
What’s next
We’re adding new gradients every week, with a goal of reaching 1,000+ in the library. Longer term, we’re building a Figma plugin, a public API, and more generator tools.
If there’s a brand gradient we’re missing, or a feature that would make this more useful to you, we’d love to hear about it — see our Contact page.