Frequently Asked Questions

Is The Gradients really free?

Yes. Every gradient and all of our generators are free to use, with no signup required.

Can I use these gradients commercially?

Yes. The CSS, Tailwind classes, and Figma tokens are code, and color values aren’t copyrightable, so you can use them in personal or commercial projects. Two limits: brand logos belong to their companies (we don’t provide them), and some brands hold trademark rights in their colors within their own industry. Don’t use a brand’s gradient to make your product look like theirs or to suggest you’re connected to them.

Are these the “official” brand gradients?

No. Brand gradients are our own unofficial references, built from each brand’s publicly visible colors. Some are close to what a brand uses and others are interpretations, so check a brand’s own guidelines if you need its official colors. The Gradients is independent and isn’t affiliated with, sponsored by, or endorsed by any brand listed. If something looks 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 — unofficial gradients inspired by real companies’ colors
• 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.