Shopify
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 gradientsTwitch
Twitch
Discord
Discord
Notion
Notion
Figma
Figma
Uber
Uber
Slack
Slack
Stripe
Stripe
Airbnb
Airbnb
Netflix
Netflix
Microsoft
Microsoft
GoogleGoogle
Apple
Apple
WhatsAppWhatsApp
PinterestPinterest
LinkedInLinkedIn
Snapchat
Snapchat
TikTok
TikTok
YouTube
YouTube
Twitter
Twitter / X
FacebookFacebook
Spotify
Spotify
InstagramInstagram
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.