Curated
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 →Featured
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.