GitHub
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 gradientsDribbble
Dribbble
Behance
Behance
Canva
Canva
Adobe
Adobe
Zoom
Zoom
Dropbox
Dropbox
Visa
Visa
Mastercard
Mastercard
Robinhood
Robinhood
Duolingo
Duolingo
Red Bull
Red Bull
Coca-Cola
Coca-Cola
McDonald's
McDonald’s
Starbucks
Starbucks
Rolex
Rolex
Chanel
Chanel
Louis Vuitton
Louis Vuitton
Gucci
Gucci
Adidas
Adidas
Nike
Nike
Tesla
Tesla
Amazon
Amazon
PayPal
PayPal
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.