Loom
New Grainy gradients
Beautiful gradients, inspired by the world's top brands
Copy CSS, Tailwind, and Figma tokens in one click. Free, no signup.
Inspired by
Browse by colour
Search any hex →All gradients
695 gradientsClickUp
ClickUp
Confluence
Confluence
Jira
Jira
Trello
Trello
Asana
Asana
Monday
Monday
Airtable
Airtable
Notion
Notion-Inspired Dark
Salesforce
Salesforce
HubSpot
HubSpot
WordPress
WordPress
Squarespace
Squarespace
Wix
Wix
Webflow
Webflow
Laravel
Laravel
Svelte
Svelte
Angular
Angular
React
React
Vue
Vue
Next.js
Next.js
Tailwind CSS
Tailwind CSS
Render
Render
Netlify
Netlify
Build your own
All tools →Gradient Loader Generator New
Loading spinners in gradient colours — ring, orb, pulse, dots or bar. Pure CSS.
Gradient Generator
Build a linear, radial or conic gradient — up to five stops, CSS, Tailwind and SVG.
Mesh Gradient Generator
Drag colour points around a canvas, then export PNG or SVG.
Animated Gradient Generator
Add motion, and get the keyframes with a reduced-motion fallback.
Gradient Text Generator
Put a gradient on a headline, with the contrast checked for you.
Glassmorphism Builder
Frosted glass panels — blur, tint and border in one block of CSS.
Gradient from Image
Drop in a photo and turn its colours into a gradient — nothing leaves your browser.
Explore the library
About the library
A reference library rather than a gallery: gradients inspired by the world’s top brands, plus curated, seasonal and UI palettes, each stored as exact hex values.
Brand gradients are built from each brand’s publicly visible colours, so you start from the right palette instead of eyeballing a compressed screenshot.
Inspired by those brands, not supplied by them: colours are approximate and may differ from official brand guidelines. We are not affiliated with any brand shown.
Four ways in
Browse by type, by mood, by the industry a brand belongs to, and by colour.
Copy-ready code
Every gradient gives you production-ready CSS, a Tailwind class and a Figma token, copied in one click.
A growing set of generators
Linear, radial and conic gradients, mesh, motion, borders, text, wallpapers and more — every tool exports real, copy-ready code.
Free to use
No signup and no attribution needed, for personal or commercial work. The text generator even reports the worst-case contrast ratio so a headline stays readable.