Is The Gradients really free?
Yes, completely. Every gradient, the Gradient Generator, and the Mesh Gradient Generator are free to use, with no signup required and no usage limits.
Can I use these gradients commercially?
Yes. The CSS, Tailwind classes, and Figma tokens are code — colors and gradient definitions aren’t copyrightable, so you’re free to use them in personal or commercial projects. The one exception is brand logos, which belong to their respective companies and aren’t something we provide anyway.
Are these the “official” brand gradients?
We source brand gradients from publicly available brand guidelines and marketing materials, and we do our best to keep them accurate. However, The Gradients is an independent reference site — we’re not affiliated with, sponsored by, or endorsed by any of the brands listed. If a brand’s gradient changes or we have something wrong, let us know via the Contact page.
How do I copy a gradient’s CSS?
Click any gradient card to open its page, then click “Copy” under the CSS, Tailwind, or Figma token block. It copies straight to your clipboard — paste it into your code.
What’s the difference between the categories?
- Brand — gradients from real companies
- Curated — designer-picked palettes not tied to a specific brand
- Seasonal — gradients for holidays and seasons
- UI — gradients built for interface elements like buttons, cards, and dark mode
Can I submit a gradient?
Yes — use the Submit a Gradient form. Include the brand name (or palette name), hex codes, and angle, and we’ll review it for publishing.
How does the Gradient Generator work?
Pick up to several color stops, set the angle using the dial or input field, and the tool generates the CSS, Tailwind class, and Figma token live as you adjust it. You can randomize, share a link to your exact gradient, or save it as a submission to the library.
What’s a mesh gradient, and how is it different?
A mesh gradient blends several colors across multiple points rather than along a single line or angle, creating a softer, more organic look. Our Mesh Gradient Generator lets you drag color points around a canvas, adjust blur and grain, and export either the CSS or a PNG image.
Do you have a Figma plugin?
Not yet — it’s on our roadmap. For now, every gradient page includes a ready-to-paste Figma token.
Do you have an API?
Not yet, but it’s planned. If you need programmatic access now, reach out via the Contact page and let us know your use case.
How often do you add new gradients?
We add new gradients regularly, with a goal of reaching 1,000+ in the library. Follow along on the homepage — newest additions appear first when no filters are applied.
I found an error or bug. How do I report it?
Email hello@thegradients.com with details, or use the Contact page. We appreciate the heads up.